web輪播圖（定時器）
阿新 • • 發佈：2020-12-11
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0 auto; padding: 0; } .all{ margin:0 auto ; width:900px; text-align:center; } #bigImg{ width: 500px; height: 400px; } .smallImg{ width: 100px; height: 80px; } .border{ border: 1px solid red; } </style> <script type="text/javascript"> window.onload=function(){ var smallImg=document.getElementsByClassName("smallImg") var i=0; var timer=setInterval(changePic,1000); changePic(); for (let i=0;i<smallImg.length;i++){ smallImg[i].onmouseover=function(){ bigImg.src=smallImg[i].src; smallImg[i].style.border="1px solid red"; } smallImg[i].onmouseout=function() { smallImg[i].style.border="none"; } } function changePic() { smallImg[i].style.border="none"; i++; if(i>smallImg.length-1) {i=0;} bigImg.src=smallImg[i].src; smallImg[i].style.border="1px solid red"; } } </script> </head> <body> <div class="all"> <img id="bigImg" src="img/1.jpg"> <br> <img id="pic1" class="smallImg" src="img/1.jpg"> <img id="pic2" class="smallImg" src="img/2.jpg"> <img id="pic3" class="smallImg" src="img/3.jpg"> <img id="pic4" class="smallImg" src="img/4.jpg"> <img id="pic5" class="smallImg" src="img/5.jpg"> <img id="pic6" class="smallImg" src="img/6.jpg"> <img id="pic7" class="smallImg" src="img/7.jpg"> <img id="pic8" class="smallImg" src="img/8.jpg"> </div> </body> </html>
定時器
定時器的作用
l 開啟定時器
n setInterval(引數，時間) //間隔型,每個1秒鐘呼叫一次show函式
例：setInterval(show,1000)
n setTimeout(引數，時間) //延時型
區別：setInterval(show,1000) ;//無限執行 ；
setTimeout(show,1000) // 只做一次，隔1秒鐘執行show函式，然後就不再執行。
l 停止定時器
n clearInterval();
n clearTimeout();