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);" />

哪个会播放/暂停。

Answer 2

要将幻灯片打开后将其转换为幻灯片，如果没有额外的按钮，请使用“onComplete”选项设置一个定时器来调用“next（）”。例如：

jQuery("a.fancybox").fancybox({
    "onComplete":function() {
        clearTimeout(jQuery.fancybox.slider);
        jQuery.fancybox.slider=setTimeout("jQuery.fancybox.next()",5000);
    }
});

Answer 3

以下是我设置该功能的方法。我添加了计数，因为在加载图库时，每次加载新图像时都会触发onStart / onComplete调用。我只想要第一次调用将setInterval绑定到下一个调用。

  function toggleRotating(fromButton) {
      count = count + 1;
      if (fromButton == false) {
        clearInterval(rotatingInterval);
        rotatingInterval = false;
        count = 0;
      } else {
        if(count == 1)
            rotatingInterval = setInterval($.fancybox.next, 10000);

      }
   }

这是我的全球变体和启动fancybox的方法。

var rotatingInterval = false;
var count = 0;
$(function () {
    $("a.slide").attr('rel', 'presentation1').fancybox({'autoDimensions':false,'height':540,'width':720,'autoScale':false,'cyclic':true, 'onStart': function(){ toggleRotating(true); } });
});

我没有创建一个停止旋转的按钮。我想我会这样做，如果你点击下一个或上一个按钮，它将toggleRotating为false。

FancyBox图片库中的幻灯片？

3 个答案: