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="top"> 147 <a href="#">登錄</a> 148 <a href="#">注冊</a> 149 <a href="#">購物車</a> 150 </div> 151 </div> 152 153 <!--2.導航欄部分--> 154 <div id="menu"> 155 <ul> 156 <a href="#"><li style="font-size: large;">首頁</li></a> 157 <a href="#"><li>手機數碼</li></a> 158 <a href="#"><li>家用電器</li></a> 159 <a href="#"><li>鞋靴箱包</li></a> 160 </ul> 161 </div> 162 163 <!--3.輪播圖部分--> 164 <div id=""> 165 <img src="../img/1.jpg" width="100%" height="100%" id="img_1"/> 166 </div> 167 168 <!--4.最新商品--> 169 <div id="product"> 170 171 <div id="product_top"> 172 <span style="font-size: 25px">最新商品</span> 173 <img src="../img/title2.jpg"/> 174 </div> 175 176 <div id="product_bottom"> 177 178 <div id="product_bottom_left"> 179 <img src="../img/big01.jpg" width="100%" height="100%" /> 180 </div> 181 182 <div id="product_bottom_right"> 183 <div id="big"> 184 <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" /></a> 185 </div> 186 187 <div class="small"> 188 <a href="#"><img src="../img/small01.jpg" ></a> 189 <a href="#"><p style="color: gray;">榨汁機</p></a> 190 <p style="color: red;">599</p> 191 </div> 192 <div class="small"> 193 <a href="#"><img src="../img/small02.jpg" ></a> 194 <a href="#"><p style="color: gray;">電視機</p></a> 195 <p style="color: red;">1599</p> 196 </div> 197 <div class="small"> 198 <a href="#"><img src="../img/small03.jpg" ></a> 199 <a href="#"><p style="color: gray;">鍋</p></a> 200 <p style="color: red;">399</p> 201 </div> 202 <div class="small"> 203 <a href="#"><img src="../img/small04.jpg" ></a> 204 <a href="#"><p style="color: gray;">面包機</p></a> 205 <p style="color: red;">799</p> 206 </div> 207 <div class="small"> 208 <a href="#"><img src="../img/small05.jpg" ></a> 209 <a href="#"><p style="color: gray;">咖啡機</p></a> 210 <p style="color: red;">899</p> 211 </div> 212 <div class="small"> 213 <a href="#"><img src="../img/small06.jpg" ></a> 214 <a href="#"><p style="color: gray;">洗衣機</p></a> 215 <p style="color: red;">999</p> 216 </div> 217 <div class="small"> 218 <a href="#"><img src="../img/small07.jpg" ></a> 219 <a href="#"><p style="color: gray;">掃地機器人</p></a> 220 <p style="color: red;">1599</p> 221 </div> 222 <div class="small"> 223 <a href="#"><img src="../img/small09.jpg" ></a> 224 <a href="#"><p style="color: gray;">微波爐</p></a> 225 <p style="color: red;">1099</p> 226 </div> 227 <div class="small"> 228 <a href="#"><img src="../img/small08.jpg" ></a> 229 <a href="#"><p style="color: gray;">壓力鍋</p></a> 230 <p style="color: red;">799</p> 231 </div> 232 </div> 233 </div> 234 </div> 235 236 <!--5.廣告圖片--> 237 <div id=""> 238 <img src="../img/ad.jpg" width="100%"/> 239 </div> 240 241 <!--6.廣告圖片--> 242 <div id=""> 243 <img src="../img/footer.jpg" width="100%"/> 244 </div> 245 246 <!--7.友情鏈接和版權信息--> 247 <div id="bottom"> 248 <a href="#"><font>關於我們</font></a> 249 <a href="#"><font>聯系我們</font></a> 250 <a href="#"><font>招賢納士</font></a> 251 <a href="#"><font>法律聲明</font></a> 252 <a href="#"><font>友情鏈接</font></a> 253 <a href="#"><font>支付方式</font></a> 254 <a href="#"><font>配送方式</font></a> 255 <a href="#"><font>服務聲明</font></a> 256 <a href="#"><font>廣告聲明</font></a> 257 <p> 258 Copyright © 2005-2016 hh商城 版權所有 259 </p> 260 </div> 261 </div> 262 </body> 263 </html>
在瀏覽器內運行，效果為頁面停留三秒后顯示廣告，廣告停留三秒后再消失。