<!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();