标签：

仿小米首页轮播图（注意事项） 布局部分 1、用ul包裹li再包裹a的形式来装图片，建立focus类； <div class="focus"> <ul> <li> <a href=http://www.mamicode.com/"javascript;:"><img src="images/banner1.webp" height="460"></a> </li> </ul> </div> 2、移动的时候是装着焦点图的ul来移动

ul里的所有li横着摆放，ul的长度可以很大，装着ul的盒子宽高和图片一样大再overflow:hidden即可；

可在js里动态生成下面的索引小圆点，这样可根据焦点图数量自动调整小圆点数（动态生成的时候同时绑定事件加上效果）；

3、要移动的盒子一定要有定位

稍后的ul移动是改变left值来做到的，因此若ul没有定位则不起效果；

4、在ul的末尾再添加一张焦点图，第一张图片的内容

作用后面说明

动画部分 1、获取所有元素结点

左滑块、右滑块、小圆点、焦点图；

var focus = document.querySelector(".focus"); var circle = document.querySelector(".circle"); var sliderL = document.querySelector(".slider-l"); var sliderR = document.querySelector(".slider-r"); var cirul = circle.querySelector("ul"); var focul = focus.querySelector("ul"); 2、绑定小圆点点击显示效果事件（点击效果）

给每个小圆点添加一个自定义属性li.setAttribute("index",i);，用于后续的left值的变化：
??点击第几个就是ul移到距左边 index*imgWidth 这么长距离处；

图片的移动是负值，仔细想想，ul的左边距离box左边的距离，若当前为第二张焦点图，则第一张焦点图一定已经位于当前图片的左边，也就是left=-imgWidth；

利用排他思想，点击后，先将所有小圆点初始化为初始状态，再将当前小圆点样式变化为点击后的状态；

for(let j=0;j<len;++j) { cirul.children[j].style.backgroundColor = "#999"; } this.style.backgroundColor = "rgba(0,0,0,0)";

这里的图片的变化可以使用动画 animate，自己写好一个封装的函数，再直接引用调用即可：

function animate(obj, target, callback) { //要移动的对象，移动的目的位置，移动结束时调用的函数 clearInterval(obj.timer); obj.timer = setInterval(function() { if(obj.offsetLeft == target) { clearInterval(obj.timer); if(callback) { //若有这个参数则调用，没有则忽略 callback(); } } else { var step = (target-obj.offsetLeft); step = step > 0 ? Math.ceil(step/10) : Math.floor(step/10); obj.style.left = obj.offsetLeft+step+'px'; } }, 30); }

注意：若animate在另外的js文件中，这个js文件一定要在当前js文件之前引用，不然会出现animate函数未定义的报错

3、右滑块点击事件，效果：每点击一次右滑块就向右移一张图片，若是最右的则移到第一张，且底下小圆圈同步变化

用一个num全局变量记录当前移动到了哪一张图片，，每点击右滑块一次num++，每次点击小圆点将点击的小圆点的index值给num；

若当前已经移动到了多余的那张上(它的地位实际上是第一张图片的替代)，则不用动画地迅速跳回第一张，直接赋值(人类无法察觉)，并将num值置为第一张的值；

if(num == len) { //此时的len是不包括多余那张的length，且num从0开始计 num = 0; //迅速跳回第一张 focul.style.left = '0px'; }

同时小圆点也要跟着变化，由于最后一张图片多余的存在，使小圆点和图片同时变化最简单的方法是另设一个全局变量cur，方法差不多不再赘述，if(cur == len) {cur = 0;}；

由于小圆点也要跟着变化，则此处也要用到排他思想

4、左滑块点击事件，效果：每点击一次左滑块就向左移一张图片，若是第一张则移到最右的一张，且底下小圆圈同步变化

方法与右滑块基本相同

5、设置定时换图

焦点图有个特点是，当客户无操作时，焦点图会隔固定时间定时切换图片，当客户将鼠标放到焦点图上时则取消此效果；

这里不用再将代码复制粘贴，有没有发现，自动切换图片和点击右滑块效果一模一样，因此每隔固定时间模拟点击一次右滑块即可；

var timer = setInterval(function() { sliderR.click(); }, 3000);

源码链接

第一次写js轮播图