jquery - 单个页面上的多个 jQuery 插件实例

Question

我有一个页面，其中包含多个缩略图“循环”图库实例。问题是我想让插件的这些实例以特定的顺序并在设定的时间后启动。他们每个人都只会经历一次过渡。我可以设置某种间隔吗？

这是我的 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
 });
});

Answer 1

感谢您的信息！

$('.singleFlip').each(function (i) {
 $(this).cycle({
  fx: 'turnRight',
  delay:   10000 * i,
  speed:   500,
  timeout: 8000,
  autostop: 1
  });
});