2020-02-08

JQuery实现定时播放广告

#一、JQ中的动画效果#
　　JS中实现图片显示和隐藏使用的是img.style.display：block(显示)/none(隐藏)
　　Jquery中实现图片显示和隐藏使用的是$("#id名字").hide();/$("#id名字").show();

JQ的开发步骤：(将js代码和html页面代码进行分离)

1. 导入JQ相关文件
  <script type="text/javascript" src="../../js/jquery-1.11.0.js"></script>
2. 文档加载完成事件：
   $("#id名字").click(function(){});页面初始化操作：绑定事件，启动页面定时器；
//后三个是JS的开发操作(相当于把js要写的文件放在了外部让第一步去添加，然后用文档加载事件完成了之后完成JS的开发操作)
3. 确定相关操作的时间
4. 事件触发函数
5. 函数里面去操作相关的元素

实现隐藏的代码(只展示head内部)：

<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
	$(function(){
		//隐藏页面图片
		$("#btn2").click(function(){  //去除标签的id=btn2
			//获得img
			$("#img1").hide();  //图片的id=img1
		});				
	});
</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				
				//显示页面图片
				$("#btn1").click(function(){
					//获得img
					//$("#img1").show();
					//$("#img1").slideDown();
					//$("#img1").fadeIn();
					  $("#img1").animate({ wdith:"1000px",opacity:"1"},5000); //透明度opacity
				});
								
				//隐藏页面图片
				$("#btn2").click(function(){
					//获得img
					//$("#img1").hide("100000");
					//$("#img1").slideUp(200);
					//$("#img1").fadeOut();
					  $("#img1").animate({ wdith:"1000px",opacity:"0.2"},5000); //透明度opacity
				});				
			});
		</script>		
	</head>
	<body>
		<input type="button" value="显示" id="btn1"/><br>
		<input type="button" value="隐藏" id="btn2"/><br>
		<img src="../../image/059b5245-e3c8-43bf-80fe-700f0e4e68b8-thumbnail.jpg" width="500px" id="img1">
	</body>
</html>

知识点汇总：
关于JQ的图片隐藏和显示：

隐藏：

已经定义好的方法：hide()/slideUp()/fadeOut() —-里面可以加时间
$("#img1").slideDown(1000);
自定义的方法：animate() —-里面可以加第一个变量：{属性：值}/第二个变量：时间
$("#img1").animate({ wdith:"1000px",opacity:"0.2"},5000); //透明度opacity

显示：

已经定义好的方法：show()/slideDown()/fadeIn() —-里面可以加时间
$("#img1").slideUp(200);
自定义的方法：animate() —-里面可以加第一个变量：{属性：值}/第二个变量：时间
$("#img1").animate({ wdith:"1000px",opacity:"0.2"},5000); //透明度opacity

#二、定时弹出广告(JS的基础上细化)#

步骤分析：

1.导入JQ的文件
2.编写JQ的文档加载事件
3.启动定时器setTimeout("毫秒值");
4.编写显示广告的函数
5.在显示广告里面加一个定时器
6.编写隐藏广告的函数


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1.导入JQ的文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js"></script >
			<script>
				
				//4.显示广告
				function show(){
					$("#img1").show();
					setTimeout("hide()",3000);//5.写一个定时器(跳到隐藏广告函数hide())
				}
				
				//6.隐藏广告
				function hide(){
					$("#img1").hide();
				}
				
				//2.编写一个文档加载事件+3.写一个定时器(跳到显示广告函数show())
				$(function(){
					setTimeout("show()",3000);
				});
				
			</script>
	</head>
	
	<body>
		<img src="../../image/059b5245-e3c8-43bf-80fe-700f0e4e68b8-thumbnail.jpg" width="200px" id="img1" style="display: none;">	 //先让图片隐藏display显示为none
	</body>
</html>