我刚刚开始学习一些 HTML 和 javascript(阅读:我对这些东西几乎一无所知),并且想让我的 index.html 页面使用 FancyBox 打开一个旋转图像库。
我已经完成了所有设置,当页面加载时,第一个图像会出现在模式对话框中,但我希望图库自动从一个图像旋转到下一个图像,也许经过一段时间后指定的时间间隔。那可能吗?我该如何进行设置?
再说一次,答案越简单越好——因为我不知道深蹲。
在我们这个时代的编程奇才面前,我谦卑自己......
最佳答案
您可以将其添加到 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);" />
这会播放/暂停。
关于jquery - FancyBox 图片库中的幻灯片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4019533/