1

我正在使用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); 
});

谢谢！本

4

2 回答 2

2

像这样的东西应该工作：

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);
    });
}
于 2012-09-05T23:33:39.253 回答
0

这就是我的结果！

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当我看到它也可以切换“取消悬停”功能时，我也使用了它。我认为更简单。

于 2012-09-06T00:10:12.163 回答