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的值以及缓冲运动进行切换