1

私はjq.carouselを使用していますが、自動回転関数が組み込まれていないため、setIntervalを使用して、を呼び出して1秒ごとに進めています$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 に答える