FancyBox图片库中的幻灯片放映? [英] Slideshow in FancyBox Image Gallery?

问题描述

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

I am just starting out learning some HTML and javascript (read: I know practically nothing about this stuff) and would like to have my index.html page open a rotating image gallery using FancyBox.

我已经完成所有设置，以至于页面加载时第一个图像出现在模式对话框中，但是我希望图库自动从一个图像旋转到下一个图像，也许是在某些图像之后指定的时间间隔.那可能吗?我将如何进行设置?

I've got it all set up, to the point that the first image comes up in a modal dialog when the page loads, but I'd like the gallery to automatically rotate from one image to the next, perhaps after some specified time interval. Is that possible? How would I go about setting that up?

再说一次，答案越简单越好-因为我不蹲坐.

Again, the simpler the answer, the better--because I don't know squat.

在我们那个时代的编程向导之前，我谦虚……

I humble myself before the programming wizards of our time...

推荐答案

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

You can add this to the end of your javascript:

setInterval($.fancybox.next, 10000);

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

The number represents the waiting time, in milliseconds (so in my example it's 10 seconds). Also, be sure, in the options of the fancybox, to specify cyclic = true, or else it will stop at the last image. (unless that's what you want)

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

edit: To add a pause you could do something like the following:

添加以下内容代替您的javascript中的那一行:

Instead of that one line in your javascript, add this:

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中添加一个按钮，如下所示:

And then you can have a button in your html, like this:

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

哪个会播放/暂停.

这篇关于FancyBox图片库中的幻灯片放映?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！