这是一个朋友前天刚接触这个行业不久问我的一个问题，我网上也查了一些，看了下代码，不喜欢；所以

自己动手做了这个小demo；希望大家可以借鉴一下

首先页面布局：其中最主要的是对类wrapper设置position:relative;overflow:hidden;

类items设置：position:absolute等属性；

接下来就事分析如何轮播：

我的思路是：点击下一页的时候：items的animate向左移动

animate（{“marginLfet”:”-800px”},1000,function(){}）;其中function（{}）里执行的方法：

首先将item-1放到$（”.items li”）最后面，然后items({marginLeft:0})

【一开始在想，将item-1追加到$（”.items li”）最后面之后，那么一开始item-1是不是要移除掉呢，

然后我观察了下一页的方法执行后的页面元素，才发现这个担心是多余的】

下面是执行下一页之后的页面元素：

【大家发现了没有，第一个li元素跑到最后面了，然后接下来点击上一页的时候，我们只需要取最后一个li元素就行了】

思路：点击上一页的时候，items的css向左移动（{“marginLfet”:0}）,然后$（”.items li”）.eq(3)放在items第一个位置里,然后动画aniamte({“marginLeft”:0},1000)；

这时候大家脑补一下：items的css向左移动（{“marginLfet”:0}）和$（”.items li”）.eq(3)[即item-1]放在items第 一个位置里都是瞬间完成，人眼是看不出来的；所以再之后执行aniamte({“marginLeft”:0},1000)时候，发现item-1慢悠悠从左侧出来

js代码如下：

接下来就是定时器了：自动轮播

【timer一定去做下判断，不然会导致连续点击的时候，图片移动会越来越快】

还有最后一个setTimeout这个：在点击上下一页的时候，我会清除定时器，所有我会在其事件里添加它，然后三秒之后再执行show(),自动轮播；

最后点击事件：

总体页面展示：