JavaScript学习——完成页面定时弹出广告
Posted 会飞的咸鱼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript学习——完成页面定时弹出广告相关的知识，希望对你有一定的参考价值。
1、获取图片的位置(document.getElementById(“”))
隐藏图片：display：none
定时操作：setInterval(“显示图片的函数”，3000);
2、步骤分析 （此案例页面定时弹出广告基于JavaScript学习——实现首页轮播图效果实现的）
第一步：在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)
第二步：确定事件(onload)并为其绑定一个函数
第三步：书写这个函数(设置一个显示图片的定时操作)
第四步： 书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)
第五步：清除显示图片的定时操作()
第六步：书写隐藏图片的定时操作
第七步：书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)
第八步：清除隐藏图片的定时操作()
1 <script> 2 function init(){ 3 //书写轮播图显示的定时操作 4 setInterval("changImg()",3000); 5 //1.设置显示广告图片的定时操作 6 time=setInterval("showAd()",3000); 7 } 8 9 //书写轮播图函数 10 var i=1; 11 function changImg(){ 12 i++; 13 14 //获取图片位置并设置src属性值 15 document.getElementById("img_1").src="../img/"+i+".jpg"; 16 if(i==3){ 17 i=0; 18 } 19 } 20 21 //2.书写显示广告图片的函数 22 function showAd(){ 23 //3.获取广告图片的位置 24 var adEle=document.getElementById("img_2"); 25 //4.修改广告图片元素里面的属性让其显示 26 adEle.style.display="block"; 27 //5.清除显示图片的定时操作 28 clearInterval(time); 29 //6.设置隐藏图片的定时操作 30 time=setInterval("hiddenAd()",3000); 31 } 32 33 //7.书写隐藏广告图片的函数 34 function hiddenAd(){ 35 //8.获取广告图片并设置其style属性的display值为none 36 document.getElementById("img_2").style.display="none"; 37 //9.清除隐藏广告图片的定时操作 38 clearInterval(time); 39 } 40 </script>
html代码：
<body body onload="init()">
<!--定时弹出广告图片位置-->
<img src="../img/pic.jpg" width="100%" style="display: none;" id="img_2"/>
3、最终实现代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>首页</title> 6 <style> 7 #father{ 8 border: 0px solid black; 9 width: 1300px; 10 height: 1600px; 11 margin: auto; 12 } 13 #logo{ 14 border: 0px solid black; 15 width: 1300px; 16 height: 50px; 17 } 18 .top{ 19 border: 0px solid blue; 20 width: 431px; 21 height: 50px; 22 float: left; 23 } 24 #top{ 25 padding-top: 12px; 26 height: 38px; 27 } 28 29 #menu{ 30 border: 0px solid red; 31 width:1300px; 32 height: 50px; 33 background: black; 34 margin-bottom: 10px; 35 } 36 ul li{ 37 display: inline; 38 color: white; 39 } 40 #product{ 41 border: 0px solid goldenrod; 42 width: 1300px; 43 height: 550px; 44 } 45 #product_top{ 46 border: 0px solid blue; 47 width: 100%; 48 height: 43px; 49 padding-top: 5px; 50 } 51 #product_bottom{ 52 border: 0px solid green; 53 width: 100%; 54 height: 498px; 55 } 56 57 #product_bottom_left{ 58 border: 0px solid red; 59 width: 200px; 60 height: 498px; 61 float: left; 62 } 63 #product_bottom_right{ 64 border: 0px solid saddlebrown; 65 width: 1094px; 66 height: 498px; 67 float: left; 68 } 69 #big{ 70 border: 0px solid hotpink; 71 width: 545px; 72 height: 247px; 73 float: left; 74 } 75 .small{ 76 border: 0px solid blue; 77 width: 180px; 78 height: 247px; 79 float: left; 80 /*让里面的内容居中*/ 81 text-align: center; 82 } 83 #bottom{ 84 text-align: center; 85 } 86 /*去掉超链接的下划线*/ 87 a{ 88 text-decoration: none; 89 } 90 </style> 91 92 <script> 93 function init(){ 94 //书写轮播图显示的定时操作 95 setInterval("changImg()",3000); 96 //1.设置显示广告图片的定时操作 97 time=setInterval("showAd()",3000); 98 } 99 100 //书写轮播图函数 101 var i=1; 102 function changImg(){ 103 i++; 104 105 //获取图片位置并设置src属性值 106 document.getElementById("img_1").src="../img/"+i+".jpg"; 107 if(i==3){ 108 i=0; 109 } 110 } 111 112 //2.书写显示广告图片的函数 113 function showAd(){ 114 //3.获取广告图片的位置 115 var adEle=document.getElementById("img_2"); 116 //4.修改广告图片元素里面的属性让其显示 117 adEle.style.display="block"; 118 //5.清除显示图片的定时操作 119 clearInterval(time); 120 //6.设置隐藏图片的定时操作 121 time=setInterval("hiddenAd()",3000); 122 } 123 124 //7.书写隐藏广告图片的函数 125 function hiddenAd(){ 126 //8.获取广告图片并设置其style属性的display值为none 127 document.getElementById("img_2").style.display="none"; 128 //9.清除隐藏广告图片的定时操作 129 clearInterval(time); 130 } 131 </script> 132 </head> 133 <body body onload="init()"> 134 <div id="father"> 135 <!--定时弹出广告图片位置--> 136 <img src="../img/pic.jpg" width="100%" style="display: none;" id="img_2"/> 137 138 <!--1.logo部分--> 139 <div id="logo"> 140 <div class="top"> 141 <img src="../img/logo2.png" height="46px" /> 142 </div> 143 <div class="top"> 144 <img src="../img/header.png" height="46px"/> 145 </div> 146 <div class="top" id使用jquery完成定时弹出广告图片