原生JS实现轮播图效果

CSS部分代码：

<style>
        *{padding: 0; margin: 0;}
        .container{
            width: 1130px;
            height: 286px;
            position: relative;
            margin: 0 auto;
            overflow: hidden;
        }
        .wrapper{
            position: absolute;
        }
        .slide{
            width: 1130px;
            height: 286px;
            float: left;
        }
        .slide img{
            width: 1130px;
            height: 286px;
        }
        .btn-left,.btn-right{
            background-image: url(https://static.zcool.cn/git_z/z/widget/slider/images/svg/left_arrow.svg?v=2);
            background-position:center;
            width: 52px;
            height: 52px;
            position: absolute;
            z-index: 999;
            left: 0;
            top: 117px;
        }
        .btn-right{
            left: 100%;
            margin-left: -52px;
            background-image: url(https://static.zcool.cn/git_z/z/widget/slider/images/svg/right_arrow.svg?v=2);
        }
    </style>

HTML部分：

<div class="container">
        <div class="wrapper">
            <div class="slide"><img src="https://img.zcool.cn/community/01411e5e6edf67a801216518fc43b6.jpg@1380w" alt=""></div>
            <div class="slide"><img src="https://img.zcool.cn/community/01e5bf5e6edfbfa801216518de51c1.jpg@1380w" alt=""></div>
            <div class="slide"><img src="https://img.zcool.cn/community/01a0495e672ba6a801216518617f4d.png@1380w" alt=""></div>
        </div>
        <div class="btn-left"></div>
        <div class="btn-right"></div>
    </div>

JavaScript部分

<script>
        //父容器，用来适配轮播图的宽
        var wrapper = document.querySelector(".wrapper");
        //图片
        var sliders = wrapper.children;
        //左边按钮
        var btn_left_ele = document.querySelector(".btn-left");
        //右边按钮
        var btn_right_ele = document.querySelector(".btn-right");
        // 下标
        var index = 0;
        function init(){
            //复制第一张图层到最后，用来达到最后一张不会出现空白的效果
            wrapper.appendChild(sliders[0].cloneNode(true));
            //获取轮播图的宽，并设置容器的宽为轮播图的宽
            wrapper.style.width = sliders.length * sliders[0].offsetWidth + "px";
        }
        function bindEvent(){
            btn_left_ele.addEventListener("click" , function(){
                if(index === 0){
                    //直接替换不需要动画;
                    // 切换到最后一张，这个切换是没有动画的
                    index = sliders.length - 1;
                    //定位每一张轮播图的位置
                    wrapper.style.left = -index *1130 + "px";
                    // 因为要显示的是倒数第二张，所以index--
                    index --;
                }else{
                    index --;
                }
                //运行封装好的动画函数
                animate( wrapper , -index * 1130 , "left" );
            })

            btn_right_ele.addEventListener("click" , function(){
                if(index === sliders.length - 1){
                    //直接替换不需要动画;
                    // 切换到最后一张，这个切换是没有动画的
                    index = 0;
                    wrapper.style.left = 0 + "px";
                    // 因为要显示的是第二张，所以index++
                    index ++;
                }else{
                    index ++;
                }
                //运行封装好的动画函数
                animate( wrapper , -index * 1130 , "left" ,"swing");
            })
        }
        init();
        bindEvent();


        //动画函数
        function animate ( ele , target , attr , timerfunction = "swing" , speed ){
            //判断数据获取一次元素当前的值
            if( attr === "opacity" ){
                var iNow = parseInt( getComputedStyle( ele )[ attr ] * 100 );
                target = target * 100 ;
            }else{
                var iNow = parseInt( getComputedStyle( ele )[attr] );
            }
            if( timerfunction === "liner"){
                //判断speed是否存在
                speed = speed === undefined ? 5 : speed;
                // 判定speed的正负;
                speed = iNow < target ? Math.abs(speed) : -Math.abs(speed);
            }
            // 开启关闭定时器
            clearInterval( ele.timer );
            ele.timer = setInterval( function(){
                if(timerfunction === "swing" ){
                // 根据目标端求得运动的速度
                speed = ( target -iNow ) / 10;
                //速度取整，要查看速度是正数还是负数
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                }
                // 判定终止条件
                if( Math.abs(target - iNow) <= Math.abs(speed) ){
                    clearInterval(ele.timer);
                    if( attr === "opacity" ){
                            ele.style[attr] = target / 100;
                        }else{
                            ele.style[attr] = target + "px";
                    }
                }else{
                    //元素运动
                    iNow += speed;
                    if( attr === "opacity" ){
                        ele.style[attr] = iNow /100 ; 
                    }else{
                        ele.style[attr] = iNow + "px";
                    }
                }
            } , 30)
        }
    </script>