web轮播图（定时器） 

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

posted @ 2020-12-11 15:13  深夜起来玩游戏  阅读(175)  评论(0)  编辑  收藏  举报