同时展示多张图片的无缝轮播

前言

这段时间在做练习的时候遇到了这个要展示多个轮播图的需求，现在大部分网页的轮播图每次都是展示一个的，就算是淘宝、天猫这样的大网站。一开始在做这个轮播图的时候在决定跳转的时刻同时防止用户短时间内频繁翻页这个地方卡了一会，最后终于做出来的时候决定将实现原理分享一下。

首先看一下要实现的效果

如图，一次性展示5张图片，向左或向右翻页时图片的展示顺序是固定的。

本文将使用 JQ 实现这个效果，如果用原生js的话道理也是一样的，只是会麻烦一点，有兴趣的读者可以自己尝试一下。

实现原理

图片位置

其实同时展示多张图片的轮播图和一次展示一张 图片的轮播图原理类似，也是展示在边缘图片还要继续走之前先将图片移动到另外一边

上图是展示单张页面的原理图，当展示图片为最右边的 ‘1’ 同时还要向右翻的时候，整个矩形要移动位置，将最左边的‘1’定位到展示窗口，然后才执行向右翻的操作；
这里为了实现无缝轮播一定要在‘头’之前衔接‘尾’，要在‘尾’之后衔接头；

而要实现多张图片的无缝轮播道理也是相似的

比如说，要实现同时展示五张图片的无缝轮播，就以五张图片为整体，将3个整体合并起来；
当展示窗口移动到最左边的时候还要向左翻页，那在翻页前先将‘矩形’的中间整体定位到展示窗口，然后再执行向左翻的操作；向右翻操作同理；

防止用户短时间内进行多次翻页

我实现这个功能的方法是给定一个用于判定是否可以翻页的变量，当变量为 true 时可以执行翻页，当变量为 false 时禁止翻页，当翻页这个动作结束时再将该变量设置为 true。

具体代码

html

<div class="pic">
     <ul class="carousel clear">
         <li><a href="#"><img src="./images/work/_pic1.jpg" width="100%" alt=""></a></li>
         <li><a href="#"><img src="./images/work/_pic2.jpg" width="100%" alt=""></a></li>
         <li><a href="#"><img src="./images/work/_pic3.jpg" width="100%" alt=""></a></li>
         <li><a href="#"><img src="./images/work/_pic4.jpg" width="</