50行代码图片轮播加定时广告
Posted breezezqf
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了50行代码图片轮播加定时广告相关的知识，希望对你有一定的参考价值。
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行代码图片轮播加定时广告的主要内容，如果未能解决你的问题，请参考以下文章