Question

我正在使用jq.carousel，因为它没有内置的自动旋转功能我使用setInterval通过调用$carouselHome.carousel('next')每秒推进它。

这有效，但我需要添加'暂停时悬停'。这是我到目前为止只有在鼠标进入并离开元素一次后才能按要求工作的内容。如何在第一页加载时“启动”间隔？（例如：http://jsfiddle.net/meredevelopment/hmUbd/）

var $carouselHome = $('#carousel-home').carousel();

$('#carousel-home_prev').on('click', function(ev) {
    $carouselHome.carousel('prev');
});

$('#carousel-home_next').on('click', function(ev) {
    $carouselHome.carousel('next');
});

/*setInterval(function() {
    $carouselHome.carousel('next');
}, 1000);*/

$("#carousel-home").mouseenter(function(){
    clearInterval($(this).data('timeoutId'));
}).mouseleave(function(){
    var someElement = $(this);
    var timeoutId = setInterval(function() {
        $carouselHome.carousel('next');
    }, 1000);
    console.log(timeoutId);
    someElement.data('timeoutId', timeoutId); 
});

谢谢！本

Answer 1

这样的事情应该有效：

if ($("#carousel-home").length > 0) {
    var $carouselHome = $('#carousel-home').carousel();

    var timeoutId = setInterval(function() {
       $carouselHome.carousel('next');
    }, 1000);

    $('#carousel-home_prev').on('click', function(ev) {
        $carouselHome.carousel('prev');
    });
    $('#carousel-home_next').on('click', function(ev) {
        $carouselHome.carousel('next');
    });

    $("#carousel-home").mouseenter(function() {
        clearInterval(timeoutId);
    }).mouseleave(function() {
        var someElement = $(this);
        timeoutId = setInterval(function() {
            $carouselHome.carousel('next');
        }, 1000);
    });
}

Answer 2

这就是我最终的结果！

if ($("#carousel-home").length > 0){
    var $carouselHome = $('#carousel-home').carousel();
    $('#carousel-home_prev').on('click', function(ev) {
    $carouselHome.carousel('prev');
    });
    $('#carousel-home_next').on('click', function(ev) {
        $carouselHome.carousel('next');
    });

    function rotateMe() {$carouselHome.carousel('next');}

    var timer = setInterval( rotateMe, 4000);

    $('#carousel-home, #carousel-home_next, #carousel-home_prev').hover(function(ev){
        clearInterval(timer);
    }, function(ev){
        timer = setInterval( rotateMe, 4000);
    });
}

下一个和上一个按钮已添加到“悬停”暂停中，当我看到它也可以切换“非悬停”功能时，我也使用了.hover。我认为更简单。

使用setInterval自动旋转jq.carousel，并在悬停时暂停

2 个答案: