Question

我有一个简单的问题。基于这个jquery循环插件的小提琴：
http://jsfiddle.net/Kz6Gk/353/

我希望滑块在mouseout上重置，以便下次当我再次悬停在它上面时，它将从第一张图像开始。

我尝试过很多选项，例如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循环开始＆＃34;悬停＆＃34;从图像开始＆＃34; 0＆＃34;再次

2 个答案: