jquery - FancyBox 图片库中的幻灯片？

Question

我刚刚开始学习一些 HTML 和 javascript(阅读:我对这些东西几乎一无所知)，并且想让我的 index.html 页面使用 FancyBox 打开一个旋转图像库。

我已经完成了所有设置，当页面加载时，第一个图像会出现在模式对话框中，但我希望图库自动从一个图像旋转到下一个图像，也许经过一段时间后指定的时间间隔。那可能吗？我该如何进行设置？

再说一次，答案越简单越好——因为我不知道深蹲。

在我们这个时代的编程奇才面前，我谦卑自己......

Answer 1

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

setInterval($.fancybox.next, 10000);

该数字表示等待时间，以毫秒为单位(因此在我的示例中为 10 秒)。另外，请确保在 fancybox 的选项中指定 cyclo = 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);" />

这会播放/暂停。