我有一个页面,其中包含多个缩略图“循环”图库实例。问题是我想让插件的这些实例以特定的顺序并在设定的时间后启动。他们每个人都只会经历一次过渡。我可以设置某种间隔吗?
这是我的 HTML:
<figure role="container-1">
<a href="#" class="singleFlip">
<img src="/assets/img/1-img.jpg" border="0" />
<img src="/assets/img/1-flipped.jpg" border="0" />
</a>
</figure>
<figure role="container-2">
<a href="#" class="singleFlip">
<img src="/assets/img/2-img.jpg" border="0" />
<img src="/assets/img/2-flipped.jpg" border="0" />
</a>
</figure>
<figure role="container-3">
<a href="#" class="singleFlip">
<img src="/assets/img/3-img.jpg" border="0" />
<img src="/assets/img/3-flipped.jpg" border="0" />
</a>
</figure>
这是我的 JS:
$('.singleFlip').cycle({
fx: 'turnRight',
delay: 10000,
speed: 500,
timeout: 8000,
autostop: 1
});
回答:
$('.singleFlip').each(function (i) {
$(this).cycle({
fx: 'turnRight',
delay: 10000 * i,
speed: 500,
timeout: 8000,
autostop: 1
});
});