鼠标悬停时循环悬停

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');
});

});

有没有办法通过在鼠标移出时淡入第一张图像来重新启动“幻灯片放映” （而不是暂停）？

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

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

这是我的jsfiddle

在此先感谢您的帮助！

Answer 1

更新：

好的，忽略下面的所有内容。我在插件的常见问题页面上找到了解决方案。

.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

然后您可以使用“prev”命令翻页到第一张幻灯片，但看起来如果您这样做，将为每张幻灯片运行过渡动画。