如何用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代码中每一步都有注释！！详情请看代码