FancyBox图片库中的幻灯片？

Question

我刚刚开始学习一些HTML和javascript(阅读:我几乎不知道这些东西)并希望我的index.html页面使用FancyBox打开一个旋转图像库.

我已经完成了所有设置,以至于当页面加载时第一个图像出现在模态对话框中,但我希望图库自动从一个图像旋转到下一个图像,可能在一段指定的时间间隔之后.那可能吗？我该如何设置呢？

再一次,答案越简单越好 - 因为我不知道蹲下.

在我们这个时代的编程向导之前,我谦卑自己......

Answer 1

您可以将其添加到javascript的末尾:

setInterval($.fancybox.next, 10000);

数字表示等待时间,以毫秒为单位(因此在我的示例中为10秒).另外,请确保在fancybox的选项中指定cyclic= true,否则它将在最后一个图像处停止.(除非那是你想要的)

编辑:要添加暂停,您可以执行以下操作:

而不是javascript中的那一行,添加:

var rotatingInterval = FALSE;
function toggleRotating(fromButton) {
  if (rotatingInterval) {
    clearInterval(rotatingInterval);
    rotatingInterval = FALSE;
  } else {
    rotatingInterval = setInterval($.fancybox.next, 10000);
    if (fromButton)
      $.fancybox.next();
  }
}
toggleRotating(FALSE);

然后你可以在你的html中有一个按钮,如下所示:

<input type="button" value="Pause" onclick="toggleRotating(TRUE);" />

哪个会播放/暂停.