jQuery 循环 "hover" 再次从图像“0”开始

Question

我有一个简单的问题。基于此 fiddle 和 jquery 循环插件：
http://jsfiddle.net/Kz6Gk/353/

我希望滑块在鼠标移出时重置，这样下次我再次将鼠标悬停在其上时，它将从第一个图像开始。

我尝试了很多选项，例如 destroy、reinit、goto、startingslide，但我无法让它工作，它总是从之前的最后一个滑块恢复mouseout 的最后一次调用。
例如，我这样修改了代码的最后一部分，它应该可以工作但还没有运气：

jQuery(function($){
    // Cycle plugin
    $('.slides').cycle({
        fx: 'none',
        speed: 1,
        timeout: 770
    }).cycle("pause");
    // Pause & play on hover
    $('.slideshow-block').hover(function(){
        $(this).find('.slides').addClass('active').cycle('resume');
    }, function(){
        $(this).find('.slides').removeClass('active').cycle('goto', 0).cycle('pause');
    });

});

Answer 1

参考fiddle JS:

$(function($){

    // Cycle plugin
function recycle()
{
$('.slides').cycle("destroy").cycle({
    fx:  'none',
    speed: 1,
    timeout: 700
});
}
    // Pause & play on hover
    $('.slideshow-block').hover(function(){
    recycle();
        $(this).find('.slides').addClass('active').cycle('resume');
    }, function(){
    recycle();
        $(this).find('.slides').removeClass('active').cycle('pause');
    });

});

Answer 2

你可以再次调用cycle(option)来重新初始化循环

jQuery(function($){

var initCycle = function(){
// Cycle plugin
$('.slides').cycle({
    fx:     'none',
    speed:   1,
    timeout: 770
}).cycle("pause");
}

// Pause & play on hover
$('.slideshow-block').hover(function(){
    $(this).find('.slides').addClass('active').cycle('resume');
}, 
//re initiate after lost hover
initCycle });

//initiate cycle after page load
initCycle();
});

jQuery 循环 "hover" 再次从图像“0”开始

jQuery cycle on "hover" start from image "0" again

jquery

cycle