輪播圖大家都見到過把，騰訊視頻點開后，在正中間就有一個輪播圖，它會隨著時間而輪流播放，到最后一張后，又會回到第一張圖
寫它的html

    <!-- 寫一個盒子放圖片 -->
     <div>
        <ul>
            <!-- 把圖片放到li中 -->
            <li class="active"><img src="./tu/11.jpg" alt=""></li>
            <!-- 給其中一個起個名，后面用來隱藏 -->
            <li><img src="./tu/22.jpg" alt=""></li>
            <li><img src="./tu/33.jpg" alt=""></li>
            <li><img src="./tu/44.jpg" alt=""></li>
            <li><img src="./tu/55.jpg" alt=""></li>
            <li><img src="./tu/66.jpg" alt=""></li>
        </ul>
            <span id="hou">&gt</span>
            <!-- 下一場按鈕 -->
            <span id="qian">&lt</span>
            <!-- 上一張按鈕 -->
        <!-- 圖片導(dǎo)航 -->
        <ol>
            <li class="active">1</li>
            <!-- 給其中一個起個名，后面用來隱藏 -->
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>
     </div>

div{
    width: 1000px;
    height: 600px;
    position: relative;
    margin: 0 auto;
    // 裝圖片容器大小以及圖片大小
    ul{
        li{
            width: 100%;
            height: 600px;
            margin: 0px 20px 20px 0px;
            display: none;
            img{
                width: 100%;
                height: 600px;
            }
        }
    }
    //把圖片導(dǎo)航定位到容器合適的地方
    ol{
        position: absolute;
        left: 150px;
        bottom: 50px;
        li{
            float: left;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 2px solid red;
            border-radius: 50%;
            background-color: #fff;
            color: #000;
            margin-right: 80px;
            font-size: 20px;
        }
    }
    //前一張按鈕的大小及其它樣式
    #qian{
        position: absolute;
        width: 80px;
        height: 120px;
        background-color: #000;
        line-height: 120px;
        text-align: center;
        font-size: 50px;
        opacity: 0.5;
        color: #fff;
        top:50%;
        margin-top: -60px;
        left: 0px;
       } 
    //后一張按鈕的大小及其它樣式
    #hou{
        position: absolute;
        width: 80px;
        height: 120px;
        background-color: #000;
        line-height: 120px;
        text-align: center;
        font-size: 50px;
        opacity: 0.5;
        color: #fff;
        top:50%;
        margin-top: -60px;
        right: 0px;
    }
    //起這個class名的隱藏
    .active{
        display: block;
        background-color: yellow;
    }
}

用js實現(xiàn)它的功能

//當html以及scss加載完成后加載它
window.onload =function(){
    var div = document.querySelector("div");
    //獲取div            
    var imgs = document.querySelectorAll("ul li");
    //獲取圖片      
    var lis =document.querySelectorAll("ol li");
    //獲取圖片導(dǎo)航        
    var qian =document.querySelector("#qian");
    //獲取id名為前的span          
    var hou =document.querySelector("#hou");
    //獲取id名為前的span            
    var index = 0 , timer =null;
     //設(shè)置一個下標寫為0，再寫個定時器名為空

     //封裝 一個下標動時，圖片也動                       
    function auto(){                                    
        index++;
        //下標每次+1                                        
        if(index > imgs.length-1){
            //判斷下標是否大于最后一個下標，如果大于，下標返回0                      
            index = 0;
        }
        for(var i = 0; i<imgs.length; i++){
            // 排他思想            
            imgs[i].classList.remove("active");
            //把圖片都隱藏          
            lis[i].classList.remove("active"); 
            //圖片導(dǎo)航也影藏        
        }
        imgs[index].classList.add("active");
        //圖片給定條件那一項出現(xiàn)           
        lis[index].classList.add("active");
        //圖片導(dǎo)航給定條件那一項出現(xiàn)            
    }
    //封裝排他
    function other(ind){                               
        for(var i = 0; i<imgs.length; i++){            
            imgs[i].classList.remove("active");
            lis[i].classList.remove("active");
        }
        imgs[ind].classList.add("active");
        lis[ind].classList.add("active");
    }
    //點擊大于號
    hou.onclick =function(){                          
        auto(); 
    //執(zhí)行上面封裝好的下標漲，圖片也跟隨動                                      
    }
    //點擊小于號
    qian.onclick =function(){                         
        index--;
    //下標遞減                                       
        if(index < 0){
    //如果小于0                                
           index =imgs.length-1 
    //返回到最后一張圖片的下標                     
        }
        other(index);
    // 排他                                
    }
    timer = setInterval(auto,800);
    //定時器每500毫秒，執(zhí)行一次圖片向后漲一個                   
    div.onmouseover =function(){  
    //鼠標移入                  
        clearInterval(timer);
    //定時器停止                      
        timer = null;
    //定時器為空                             
    }
    div.onmouseout =function(){
    //鼠標移出                  
        timer = setInterval(auto,800);
    //定時器繼續(xù)           
    }
    for(var j = 0; j<lis.length ;j++){
    //循環(huán)每一個ol下的li          
        lis[j].ind = j;
        //保留一個下標                         
        lis[j].onclick =function(){
            //點擊每一個ol下的li             
            index = this.ind
            //當前下標為指定的下標                    
            other(this.ind);
            //排他 下標為指定下標                    
        }
    }
}

如此，該案例就寫完了，它會隨著時間動而動，循環(huán)到最后一張圖片后，立即返回到第一張圖片，如此無限循環(huán)。