jquery的焦点图片无限循环关键思维

 

在循环的时候，关键的是按（下一页按钮）到最后一页的时候和按（上一页按钮）到到第一页的时候如何转换；

首先必须知道3个js方法，prepend()、append()和clone();

prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。 

append() 方法在被选元素的结尾（仍然在内部）插入指定内容。

clone() 方法生成被选元素的副本，包含子节点、文本和属性，简单说就是克隆元素。

看下图，比如有四张图片循环，虚线为当前视区，按Prve按钮的时候，当前位置发生变化，当图片1到视区的时候，用clone()方法克隆一份图片4插入到图片1的前面prepend(),

当按Next按钮，图片四到视区的时候，克隆clone()一份图片1到图片四的后面append()，这样就得到了数列：3(克隆的)，0，1，2，3，0(克隆的)，有这个数列就方便我们判断了，思路为：默认显示

序列0，当按Prve按钮到图片1的时候，判断如果序列少于0就等于3；当按Next按钮到图片4的时候，判断如果序列大于3就等于0；这样就实现无限循环了。

 

 

效果如下：