1. 前言
今天又重写了一遍轮播的jquery代码，居然写了一个下午。如此深刻得体会到不写博客真的记不住系列，一个月前写的轮播就已经快忘干净了，所以还是要养成写博客的好习惯。
至少也为自己以后来抄代码节约时间。
2. 实现
2.1 html
首先我们的页面上要有图片和分页器，那么实现结果如下图所示
对应html代码如下
我是服了这个的代码缩进了，复制粘贴的简直没法看，直接上图吧。
2.2 css
然后是调整css
这里是用绝对定位直接把div.gallery居中了，可以说是单页应用偷懒必备。
.gallery {
width: 920px;
height: 450px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ccc;
overflow: hidden;
box-shadow: 0 0 3px #AAAAAA;
}
update：经逍遥提醒，添加一种更加优雅的居中方法
这里轮播的一个关键就是用使用display:flex来将图片横排，然后overflow:hidden来保证一次只显示一张图片（其他的三张都被隐藏掉了）。
这里我们把div.slides的宽高也都写死
.gallery .slides .slide{
width: 3680px;
height: 400px;
}
把宽度设置成div.gallery的宽度四倍，因为本次写的轮播里有四张图片。
最后下面的分页器用flex布局一下就好了。
这样页面基本完成了，最后来做js的功能实现。
2.3 js
首先思路是点到页数的话就计算和当前页数的差值x，然后平移x*920px的距离，点到前翻或者后翻就平移+/-920px的距离，这样在transition: all 1s;的情况下就可以实现轮播效果了。
这里又涉及到一个从第一页向前翻页翻到最后一页和从最后一页向后翻页翻到第一页的功能。基本实现思路是，将最后一张图片复制一份放到第一张前面，把第一张图片复制一份放到最后一张后面。
slides = $('.slide');
firstChild = slides.first().clone(true);
lastChild = slides.last().clone(true);
firstChild.appendTo(slides.parent())
lastChild.prependTo(slides.parent());
这样我们翻到了这两个复制的假页面之后再使用jq的.animate/.css来改变margin-left到正确的页面位置就可以了，这里比较trick的地方在于使用.animate/.css调整margin-left时间时常用户是感受不到的。所以还是一个欺骗的技巧。
最后一个点是为了避免用户点击多次造成的不良影响，我们设置一个锁。在用户点击时先检查是否上锁，如果没有上锁就允许点击事件，否则拒绝。在点击事件中先上锁，之后执行轮播的滑动操作，执行完成之后再将锁解开。
$('.prevbtn').on('click', function(event) {
if (lock) {
return;
}
addLock();
if (curPage !== 1) {
$('.gallery .slides').animate({marginLeft: '+=920px'}, 300, 'linear', function(){
curPage -= 1;
unLock();
});
} else {
curPage = 4;
$('.gallery .slides').animate({marginLeft: '+=920px'}, 300, 'linear', function(){
$('.gallery .slides').animate({marginLeft: '-3680px'}, 0, unLock);
});
}
});
总体来说就是这样了。
3. 代码
源码地址
https://github.com/htkz/test-jirengu/tree/master/class/class32/slides
预览链接
https://htkz.github.io/test-jirengu/class/class32/slides/