原生javascript实现图片左右平滑轮播效果（思路分析+代码）

效果截图：

思路：

        1 准备工作

            1 通过html和css实现图片水平布局（可以在main里面设置overflow=scrollleft，更好的观察图片移动的轨迹）

            2 获取需要操作的对象

            3 设置默认展示的图片的下标  imgIndex = 1

              默认的轮播按钮下标  btnIndex = 0

              初始的main的scrollLeft main.scrollLeft

        2 效果1：图片切换  moveMent()  注意该调用需要放在其他效果代码后面进行调用

            1 用dsq1实现图片的瞬间切换

            2 判断当前图片的下标

                如果大于图片数组的长度，则重置imgIndex = 2，从图片数组的第三张开始，即想要展示的第二张图片

            3 调用含有dsq2的move运动函数，实现图片的缓慢切换

                1 获取开始值和结束值,即每2张图片之间移动的距离

                2 设置步长speed  speed = (end-start)/20

                3 判断两张图片之间是否切换完毕

                    记录两张图片切换需要走多少步num  

                    此案例移动距离为600px,speed为20，则num=30

                    即定时器dsq2执行30次后，两张图片完成切换

            4 实现图片自己轮播时，按钮背景色跟随图片的切换改变效果

        3 效果2：点击li按钮时，切换到对应图片，并对应改变背景色

            1 遍历li按钮数组，用for遍历时，注意用let声明

            2 给li[i]设置点击事件 btnIndex=i  imgIndex = i+1

            3 调用move(),实现图片缓慢切换

            4 遍历li按钮数组，清除背景色（注意HTML布局时，就给第一个Li默认背景样式）

            5 给当前点击的li按钮设置背景色

        4 效果3：鼠标移入，轮播停止；鼠标移出，轮播继续

            1 onmouseover 清除定时器dsq1 轮播停止

            2 onmouseout  创建定时器dsq1,调用moveMent()图片切换函数 轮播继续

        5 效果4：点击右边按钮，显示下一张

            给右边按钮绑定点击事件，调用moveMent()图片切换函数

        6 效果5：点击左边按钮，显示上一张

            1 给左边按钮添加点击事件

            2 图片下标--

            3 判断当前图片是否是第一张

                1 如果是第一张，则重新赋值imgIndex=4，给main设置上一张图片的滚动距离

                2 调用move()函数，

                3 遍历li，清除lis[i]的背景色

                4 li按钮下标--

                5 判断li按钮下标，小于0时，重置btnIndex=4，到达第5个li

                6 给当前li背景色

<style>
    *{
        margin: 0;
        padding: 0;
        /*除去左、右箭头的下划线*/
        text-decoration: none;
    }
   .box{
       width: 600px;
       height: 400px;
       border: 1px solid #000;
       margin: 20px auto;
       position: relative;
   }
   .main{
    height: 400px;
    width: 600px;
    /* overflow: scroll; */
    overflow: hidden;
   }
   .divImgs{
       width: 4200px;
       height: 400px;
   }
   .divImgs img{
       width: 600px;
       height: 400px;
       float: left;
   }
   .arrow{
        /*记得给宽高*/
       width: 30px;
       height: 30px;
       border-radius: 50%;
       display: inline-block;
       text-align: center;
       font-size: 30px;
       line-height: 30px;
       position: absolute;
       top: 46%;
       font-weight: bold;
       display: none;
   }
   .left{
       left: 20px;
   }
   .right{
       right: 20px;
   }
    .box:hover .arrow{
       display: block;
   }
   ul{
       position: absolute;
       right: 20px;
       bottom: 20px;
   }

/*注意：这里不要写成.box li，不然会覆盖后续的.bg背景色，导致无法实现li按钮背景色跟随*/
   ul li{
       list-style-type: none;
       width: 15px;
       height: 15px;
       border-radius: 50%;
       display: inline-block;
       margin: 0 1px;
       background-color: aliceblue;
       font-size: 12px;
       text-align: center;
       line-height: 15px;
   }
   .bg{
       background-color: skyblue;
   }
 
</style>

<div class="box">
        <div class="main">
            <div class="divImgs">
                <img src="./img/5.jpg">
                <img src="./img/1.jpg">
                <img src="./img/2.jpg">
                <img src="./img/3.jpg">
                <img src="./img/4.jpg">
                <img src="./img/5.jpg">
                <img src="./img/1.jpg">
            </div>
        </div>
        <a href="javascript:;" class="arrow left">&lt;</a>
        <a href="javascript:;" class="arrow right">&gt;</a>
        <ul>
            <li class="bg">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

<script>
        var box = document.querySelector('.box')
        var main = document.querySelector('.main')
        var divImgs = document.querySelector('.divImgs')
        var lis = document.querySelectorAll('li')
        var imgs = document.querySelectorAll('img')
        var btnLift = document.querySelector('.left')
        var btnRight = document.querySelector('.right')
        //两个定时器
        var dsq1,dsq2;
        //单个图片的长度，为后续移动路程的计算做准备
        var imgW = imgs[0].offsetWidth
        //第一张显示的图片下标
        var imgIndex = 1
        //默认的按钮下标
        var btnIndex = 0
        //初始的main的scrollLeft值 600px
        main.scrollLeft = imgW*imgIndex
        
        //效果1：图片切换
        function moveMent(){
            //从第2张图片开始递增
            imgIndex++
            //当下标大于图片数量时，从第三张图片开始
            if(imgIndex>6){
                imgIndex = 2
                //给main设置上一张图片的滚动距离
                main.scrollLeft = imgW*(imgIndex-1)
            }
            move()

            //这里实现图片自己轮播时，按钮背景色跟随图片的切换改变
            for(var i = 0;i<lis.length;i++){
                lis[i].className=''
            }
            //按钮下标
            btnIndex++
            //有5个点，下标最大为4
            if(btnIndex>4){
                btnIndex=0
            }
            lis[btnIndex].className='bg'
        }
        

        //效果2：点击按钮时，切换到对应图片，并对应改变背景色
        for(let i = 0;i<lis.length;i++){
            lis[i].onclick = function(){
                //注意点：按钮下标和图片数组下标的关系
                btnIndex=i
                imgIndex = i+1
                move()
                for(let j=0;j<lis.length;j++){
                    lis[j].className=''
                }
                lis[btnIndex].className='bg'

            }
        }

        //效果3：鼠标移入，轮播停止；鼠标移出，轮播继续
        btnRight.onmouseover = function(){
            clearInterval(dsq1)
        }
        btnLift.onmouseout = function(){
            dsq1 = setInterval(moveMent,3000)
        }
        
        //效果4：点击右边按钮，显示下一张
        btnRight.onclick = function(){
            moveMent()
        }
        //效果5：点击左边按钮，显示上一张
        btnLift.onclick = function(){
            imgIndex--
            if(imgIndex<0){
                imgIndex = 4
                //给main设置上一张图片的滚动距离
                main.scrollLeft = imgW*(imgIndex+1)
            }
            move()
            //先去除li对象中class属性值
            for(var i=0;i<lis.length;i++){
                lis[i].className=''
            }
            btnIndex--
            if(btnIndex<0){
                btnIndex=4
            }
            lis[btnIndex].className='bg'
            
        }
        //调用moveMent函数,设置图片3秒切换一次
        //注意该调用需要放在其他效果代码后面
        dsq1 = setInterval(moveMent,3000)
        

实现图片的缓慢切换的move()函数如下：

function move(){
            //获取开始值和结束值,指每2张图片之间移动的距离
            var start = main.scrollLeft
            var end = imgIndex*imgW
            var speed = (end-start)/20//speed=30
            //num为步数，宽度为600px,speed为30，则走完需要20步
            var num = 0
            clearInterval(dsq2)
            dsq2 = setInterval(function(){
                num++
                if(num == 20){
                    clearInterval(dsq2)
                    main.scrollLeft = end
                }else{
                    start += speed
                    main.scrollLeft = start
               }
                //注意dsq2的时间和dsq1时间的大小，dsq2的时间间隔不能太大   
            },30)
        }