javascript轮播图（缓冲运动）

哈喽，大家好呀！我又来咯！相信大家在翻网页的时候都会看到首页的轮播图！今天讲讲实现原理，感觉有用就收藏吧！

轮播图主要是利用缓冲运动来实现图片的切换，这样看起来比较有画面感哈！

那么什么叫做缓冲运动呢？？？

实际上就是图片的运动曲线：慢--快-慢

实现目标：添加轮播图实现图片默认进行缓冲运动，点击左右按钮实现图片的切换！

运动原理：运动元素都要绝对定位，根据动态设置left值或者top值进行运动

实现步骤：

1.html部分，一个轮播图视口box，一个li标签容器ul，以及图片容器li标签，以及左右两个按钮，li标签宽高要和图片一样哟！

 <div class="box">
        <ul>
            <li><img src="../images/b1.png" alt=""></li>
            <li><img src="../images/b2.png" alt=""></li>
            <li><img src="../images/b3.png" alt=""></li>
            <li><img src="../images/b4.png" alt=""></li>
        </ul>
        <div class="left"></div>
        <div class="right"></div>
  </div>

2.给以上标签设置css（内容简单，不做过多介绍，直接上代码了哦！）

<style>
        img {
            width: 960px;
            height: 500px;
        }

        li {
            list-style: none;
            width: 960px;
            height: 500px;
            float: left;
        }

        ul {
            height: 500px;
            position: relative;
            width: 3840px;
            padding: 0;
        }

        .box {
            width: 960px;
            height: 500px;
            margin: 0 auto;
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: relative;
        }

        .left,
        .right {
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: rgba(0, 0, 0, .3);
            z-index: 2;
            top: 50%;
            transform: translateY(-50%);
            /* display: none; */
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }
    </style>

3.获取节点

在script中获取对应的BOM节点，并克隆ul中的第一个li标签，添加到ul的末尾处，这样实现轮播图的无缝运动，并且根据li标签的个数动态设置ul容器的宽度，如果宽度不够的话，li标签浮动不起来！这里注意，一定要先克隆，再设置ul宽度！给每个li标签声明一个自定义属性index，代表的是第几张图片！

var ul = document.querySelector("ul");
        var lis = document.querySelectorAll("li")
        var liWidth = document.querySelectorAll("li")[0].offsetWidth;
        var left = document.querySelector(".left");
        var right = document.querySelector(".right");
        var index = 1, timer = null;
        var box = document.querySelector(".box");
        var copyLi = lis[0].cloneNode(true);
        ul.appendChild(copyLi);
        ul.style.width = (lis.length + 1) * liWidth + "px";

4.封装缓冲运动函数，留作备用！

每句话后面都有详细的注释，方面初学者学习理解！

//obj:运动对象
//target:目标位置
//style:运动对象的样式，比如left，top，width，height等
//callback:回调函数，当运动结束时调用，执行回调函数内部的代码段

function move(obj, target, style,callback) {                       // 对象移动封装
    clearInterval(obj.timer)                             //再重复点击时，清除上一次的计时器，这样计时器不会叠加
    obj.timer = setInterval(function () {                //给每一个对象添加一个计时器
        var cur = parseInt(getComputedStyle(obj)[style]);//获取当前对象的偏移量;
        var speed = (target - cur) / 8;                                   //定义速度变量
        if (speed < 1) {                              //判断当前对象的目标位置如果小于当前对象的偏移量，则速度变成负值
            speed = Math.ceil(speed);                                //也就是当前对象向左移动的left值逐渐缩小，否则就是正常向右移动
        }
       if (speed >= 0 && cur + speed >= target || speed < 0 && cur + speed < target) {      //如果速度变量大于0，并且当前对象的偏移量加上速度变量大于对象的目标位置
           obj.style[style] = target + "px";                                              //或者速度变量小于0，并且当前对象的偏移量减去速度变量小于对象的目标位置时
           clearInterval(obj.timer);
           if (callback) {
               callback();
           }                                                     //当前对象的偏移量等于目标位置并且清除计时器
        } else {                                                                          //否则就正常执行对象的移动
           obj.style[style] = cur + speed + "px";                                         //当前对象的偏移量等于当前对象的偏移量加上速度变量(一直运动)
        }
    },30)
}

5.创建一个有名无参函数；

函数内部开启计时器，规定切换图片的间隔时间（时间不要太短），调用缓冲运动函数，并且传入参数，并且在函数内部进行判断，当图片等于最后一张时，秒换回第一张继续进行缓冲运动！

start()
        function start() {
            timer = setInterval(function () {
                if (index == lis.length + 1) {
                    index = 1;
                    ul.style.left = "0px"
                }
                move(ul, -liWidth * index, "left");
                index++;
                console.log(index);
            }, 2000)
        }

6.设置鼠标移入轮播视口时，左右两个按钮显示，移出时进行隐藏，css设置默认隐藏；

建议使用添加类名，这样可以设置透明度以及平移，效果会比这个要好些，因为每天要敲很多代码，所以没有找到，不会的可以关注我私聊告诉你原理！

 box.onmouseover = function () {
            clearInterval(timer);
            left.style.display = "block"
            right.style.display = "block"
        }
 box.onmouseout = function () {
            start();
            left.style.display = "none"
            right.style.display = "none"
        };

7.点击左按钮进行左切换，点击右按钮进行右切换

这里就用到上面设置的自定义属性了，是根据li标签的属性值进行的切换，

例如：右按钮点击事件；

判断当图片在最后一张时，秒换回第一张（index属性赋值为第一张，ul的left值为0即可），否则就是正常的切换，左按钮的原理一样

right.onclick = function () {
            if(index == lis.length+1){
                index = 1;
                ul.style.left = "0px"
            }
            index++;
            move(ul, -liWidth * (index - 1), "left")
        }
left.onclick = function(){
           if(index == 1){
               index = lis.length + 1;
               ul.style.left = lis[0].offsetWidth -  ul.offsetWidth   + "px";
           }
           index--;
           move(ul,-liWidth*(index - 1),"left")
       }

8.最后给大家留个小作业

动态根据li标签的个数添加轮播导航条，实现点击对应导航条实现图片的切换

方法提示：

1.利用for循环得到长度个数，创建dl>dd

2.根据index的值以及缓冲运动进行切换