Question

我想知道是否有人知道Cycle插件是如何工作的。

jQuery(function($){
    $(".slides").cycle({
        fx:     'fade',
        speed:   450,
        timeout: 5,
        startingSlide: 0,
    }).cycle("pause");

    // Pause & play on hover
    $(".slideshow-block").mouseover(function() {
     $(this).find(".slides").addClass('active').cycle('resume');
    }).mouseout(function(){
    $(this).find(".slides").removeClass('active').cycle('pause');
});

});

有没有办法通过淡出到mouseout上的第一个图像来重新启动“幻灯片放映” （而不是暂停）？

我找到了这段代码，但它对我不起作用。

$(this).find('.slides').removeClass('active').cycle('stop').cycle({
    startingSlide: 0
});

这是我的jsfiddle

提前感谢您对此的任何帮助！

Answer 1

更新：

好的，忽略下面的一切。我在插件的FAQ页面上找到了解决方案。

.cycle函数可以采用整数参数，将当前幻灯片设置为传递的索引。

$(this).find(".slides").removeClass('active').cycle('pause').cycle(0);

http://jsfiddle.net/WetNoodles/Ly0jxgz6/7/

它看起来并没有得到官方的支持，但您可以在鼠标移出事件中重建循环插件。（另外，我将mouseout改为mouseleave - 它似乎有更可靠的结果）

.mouseleave(function () {
    $(this).find(".slides").removeClass('active').cycle('pause');
    buildCycle();
});

http://jsfiddle.net/Ly0jxgz6/2/

作为额外注释，您可以确定jQuery的数据功能当前正在显示哪张幻灯片。

var currSlide = $('.slides').data('cycle.opts').currSlide

然后您可以使用＆＃39; prev＆＃39;命令转到第一张幻灯片，但看起来如果这样做，将为每个幻灯片运行过渡动画。

循环悬停在mouseout上

1 个答案: