如何用js做輪播圖

js實現輪播圖
1.首先要有基本的樣式佈局 比如
CSS

<style>
     .container{
        width: 500px;
        height: 350px;
        border: 5px solid red;
        margin: 0 auto;
        overflow: hidden;
        padding: 10px;
        position: relative;
    }
    #btns{
        width: 100%;
        height: 30px;
    }
    #btns .active{
        background: pink;
    }
    #content{
        width: 100%;
        height: 300px;
        font-size: 30px;
        text-align: center;
        position: relative;
    }
    #content div{
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        background: white;
        transition: opacity 1s;
    }
    #content div img{
        width: 100%;
        height: 100%;
    }
    #content .active{
        display: block;
        z-index: 1;
        opacity: 1;
    }
    #btn_left , #btn_right{
        position: absolute;
        top: 50%;
        margin-top: -10px;
        z-index: 999;
    }
    #btn_right{
        right: 10px;
    }
    </style>

HTML

 <div class="container">
                <div id="btns">
                    <button class="active">1</button>
                    <button>2</button>
                    <button>3</button>
                </div>
                <div id="content">
                    <div class="active"><img src="../第二階段/day11/img/jay2.jpg" alt=""></div>
                    <div><img src="../第二階段/day11/img/jay3.jpg" alt=""></div>
                    <div><img src="../第二階段/day11/img/jay4.jpg" alt=""></div>
                </div>
                <button id="btn_left">&lt;</button>
                <button id="btn_right">&gt;</button>
            </div>

其次就是最重要的js了

<script>
            //輪播圖
            //獲取元素
        var btns = document.getElementById("btns").children
        var content = document.getElementById("content").children
        //for循環遍歷元素數組
        for(var i = 0 ; i < btns.length ; i++){
            //當鼠標移入時
            btns[i].addEventListener("mouseover" , function(){
                for(var k = 0 ; k < btns.length ; k++){
                    //找到所有按鈕
                    if(btns[k] === this){
                        break;
                    }
                }
                // 將k值賦值給now_index,方便後面做輪播圖效果提供下標
                now_index = k ;
                //刪除所有無關的active
                removeClass(btns , "active")
                removeClass(content , "active")
                //給對應的元素添加active
                btns[now_index].className += "active"
                content[now_index].className += "active"
            })
        }
        //刪除所有元素類名（函數封裝）
        function removeClass(ele_list , class_Name){
            //遍歷數組找到每一個類名
            for(var i = 0 ; i < ele_list.length ; i++){
                //將獲取到的類名轉化成數組方便刪除
                var ele_list_arr = ele_list[i].className.split(" ");
                //用indexOf判斷數組中有沒有該元素屬性值
                var index = ele_list_arr.indexOf(class_Name)
                if(index !== -1){
                    ele_list_arr.splice(index , 1)
                    //再將刪除後的轉化成字符串賦值給元素類名
                    ele_list[i].className = ele_list_arr.join(" ");
                }
                
            }
        }

        //輪播圖的核心就是下標
        //聲明一個變量用來記錄
        var now_index = 0 ;
        var btn_left_ele = document.getElementById("btn_left")
        var btn_right_ele = document.getElementById("btn_right")
        //左側按鈕
        btn_left_ele.addEventListener("click" , function(){
            //下標存在負數？不存在
            if(now_index === 0){
                now_index = btns.length - 1
            }else{
                now_index -- ;
            }
            console.log(now_index)
            //刪除所有無關的active
            removeClass(btns , "active")
                removeClass(content , "active")
                //給對應的元素添加active
                btns[now_index].className += "active"
                content[now_index].className += "active"
        })
        //右側按鈕
        btn_right_ele.addEventListener("click" , function(){
            //下標存在負數？不存在
            if(now_index === btns.length - 1){
                now_index = 0
            }else{
                now_index ++ ;
            }
            //刪除所有無關的active
            removeClass(btns , "active")
                removeClass(content , "active")
                //給對應的元素添加active
                btns[now_index].className += "active"
                content[now_index].className += "active"
        })
        //自動輪播
        var e = new Event("click")
        var timer = setInterval(function(){
            btn_right_ele.dispatchEvent(e)
        },1000)
        //鼠標移入 關閉定時器
        var container_ele = document.querySelector(".container")
        container_ele.addEventListener("mouseover" , function(){
            clearInterval(timer)
        })
        container_ele.addEventListener("mouseout" , function(){
            timer = setInterval(function(){
            btn_right_ele.dispatchEvent(e)
        },1000)
        })
        </script>

js步驟
1.先解決鼠標移入，可以切換不同的圖片
方法：編寫函數先刪除原有的class名，然後再給當前移入的元素添加上新的class名
2.然後就是鼠標點擊左右按鈕 可以切換圖片，同理
3.最後是自動播放圖片
方法：編寫定時器，隔幾秒自動切換圖片
js代碼中每一步都有註釋！！詳情請看代碼