50行代碼圖片輪播加定時廣告
阿新 • • 發佈：2018-06-26
tis play function ont G1 type isp pla nbsp
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>圖片輪播+定時廣告</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <script> 8 function init(){ 9 setInterval("test()",1000); 10 //2秒後顯示廣告 不加var是成員變量可以直接用,加了var就變成了局部變量 11 time=setInterval("showAd()",2000); 12 } 13 var i=1 14 function test(){ 15 i++; 16 if(i==4){ 17 i=1; 18 } 19 //獲取圖片位置並設置src屬性值 20 document.getElementById("imgid").src="../img/"+i+".jpg"; 21 } 22 // 定時廣告 23 //書寫顯示廣告圖片的函數 24 function showAd(){ 25 //獲取廣告圖片的位置並修改廣告圖片元素裏面的屬性讓其顯示 26 var adEle = document.getElementById("advertising"); 27 adEle.style.display = "block"; 28 //清除顯示圖片的定時操作 29 clearInterval(time); 30 //設置隱藏圖片的定時操作 31 time = setInterval("hiddenAd()",3000); 32 } 33 //書寫隱藏廣告圖片的函數 34 function hiddenAd(){ 35 //獲取廣告圖片並設置其style屬性的display值為none 36 document.getElementById("advertising").style.display= "none"; 37 //清除隱藏廣告圖片的定時操作 38 clearInterval(time); 39 } 40 </script> 41 </head> 42 <body onload="init()"> 43 <div id="advertising" style="display:none;"> 44 <img src="../img/3.jpg" id="img1" width="100%" > 45 </div> 46 <div > 47 <img src="../img/1.jpg" id="imgid" width="50%" > 48 </div> 49 </body> 50 </html>
50行代碼圖片輪播加定時廣告