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");
        // 下標(biāo)
        var index = 0;
        function init(){
            //復(fù)制第一張圖層到最后窄做，用來達(dá)到最后一張不會(huì)出現(xiàn)空白的效果
            wrapper.appendChild(sliders[0].cloneNode(true));
            //獲取輪播圖的寬，并設(shè)置容器的寬為輪播圖的寬
            wrapper.style.width = sliders.length * sliders[0].offsetWidth + "px";
        }
        function bindEvent(){
            btn_left_ele.addEventListener("click" , function(){
                if(index === 0){
                    //直接替換不需要?jiǎng)赢?
                    // 切換到最后一張宵呛，這個(gè)切換是沒有動(dòng)畫的
                    index = sliders.length - 1;
                    //定位每一張輪播圖的位置
                    wrapper.style.left = -index *1130 + "px";
                    // 因?yàn)橐@示的是倒數(shù)第二張先口，所以index--
                    index --;
                }else{
                    index --;
                }
                //運(yùn)行封裝好的動(dòng)畫函數(shù)
                animate( wrapper , -index * 1130 , "left" );
            })

            btn_right_ele.addEventListener("click" , function(){
                if(index === sliders.length - 1){
                    //直接替換不需要?jiǎng)赢?
                    // 切換到最后一張向胡，這個(gè)切換是沒有動(dòng)畫的
                    index = 0;
                    wrapper.style.left = 0 + "px";
                    // 因?yàn)橐@示的是第二張窒典，所以index++
                    index ++;
                }else{
                    index ++;
                }
                //運(yùn)行封裝好的動(dòng)畫函數(shù)
                animate( wrapper , -index * 1130 , "left" ,"swing");
            })
        }
        init();
        bindEvent();


        //動(dòng)畫函數(shù)
        function animate ( ele , target , attr , timerfunction = "swing" , speed ){
            //判斷數(shù)據(jù)獲取一次元素當(dāng)前的值
            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的正負(fù);
                speed = iNow < target ? Math.abs(speed) : -Math.abs(speed);
            }
            // 開啟關(guān)閉定時(shí)器
            clearInterval( ele.timer );
            ele.timer = setInterval( function(){
                if(timerfunction === "swing" ){
                // 根據(jù)目標(biāo)端求得運(yùn)動(dòng)的速度
                speed = ( target -iNow ) / 10;
                //速度取整湿故，要查看速度是正數(shù)還是負(fù)數(shù)
                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{
                    //元素運(yùn)動(dòng)
                    iNow += speed;
                    if( attr === "opacity" ){
                        ele.style[attr] = iNow /100 ; 
                    }else{
                        ele.style[attr] = iNow + "px";
                    }
                }
            } , 30)
        }
    </script>