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

相关阅读:
转：五年java人的一点感悟
6:ZigZag Conversion
5:Longest Palindromic Substring
4：Median of Two Sorted Arrays
3:Longest Substring Without Repeating Characters
读写分离
docker swarm部署spring cloud服务
kubeadm方式安装kubernetes
《Spring Boot 实战》随记
https部署

原文地址：https://www.cnblogs.com/syqlwyx/p/14120489.html