2

我有用于自动播放的序列滑块设置，它只会滑到第二张幻灯片然后停止。它应该滑过七张幻灯片。

这是我设置的选项的代码，但我不明白为什么它在幻灯片 2 之后停止。也许 CSS 转换有问题？我难住了！

$(document).ready(function(){
var options = {
    autoPlay: true,
    autoPlayDelay: 1000,
    nextButton: true,
    prevButton: true,
    preloader: true
};
var sequence = $("#sequence").sequence(options).data("sequence");

sequence.afterLoaded = function(){
    $(".prev, .next").fadeIn(500);
}
});

该网站在这里 - http://aald.captechnix.com/

4

2 回答 2

5

今天早些时候遇到了同样的问题，并快速查看了源代码。看起来 sequence.js 只是查看每一帧的直接子帧，以确定动画何时结束，然后再移动到下一帧。查看您的示例，您似乎在每张幻灯片的任何直接子项上都没有任何转换，因此在内部，sequence.js 从不将这些元素的“animationEnded”属性设置为 true，并且拒绝移动到下一张幻灯片。

确保每张幻灯片的所有直接子级都至少有一个 .animate-in 过渡，并且该元素的值实际上已过渡。因此，在您的情况下，请尝试添加以下 css（我省略了供应商前缀）：

#sequence .width {
 transition: all 1s linear;
 z-index: 9999;
}
#sequence .animate-in .width {
 z-index: 9998; /* or some other property as long as it changes */
}

#sequence-theme img {
 transition: all 0.1s linear;
 opacity: 0;
}
#sequence-theme .animate-in img {
 opacity: 1; /* or some other property as long as it changes */
}
于 2013-04-18T00:33:43.263 回答
0

这里的替代解决方案是如果我们添加以下函数：

setInterval(function () {document.getElementById("your-button-id").click();}, 5000);

这样，我们每 n 次模拟按钮单击。如果你想隐藏按钮，你可以添加隐藏到箭头容器的可见性：

.banner-arrow-container {
    visibility: hidden;
}
于 2017-05-31T09:09:55.050 回答