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

时间:2024-09-12 08:35:44

在循环的时候,关键的是按(下一页按钮)到最后一页的时候和按(上一页按钮)到到第一页的时候如何转换;

首先必须知道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;这样就实现无限循环了。

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

效果如下:

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