自動切り替え機能をつけたカルーセルにマウスが乗ったら停止する方法

昨日の続き(自動切り替え機能のないカルーセルライブラリに自動切り替え機能をつける方法 | while(isプログラマ))

jQuery最高の教科書を読んでいたらスライドショーを作るという項目があって、その中にマウスが乗ったら自動切り替えを停止するという項目があり、「なるほど!」と思ったので機能作ったサンプルページを少しだけ拡張してみました。

以下が今回作成したJavaScriptのコード

$(function(){
    var timerID, interval = 7000;
    
    autoFlipster = function(){
        $('.flipto-next').click();
    };
    
    function startTimer(){
        timerID = setInterval(autoFlipster, interval);
    }
    function stopTimer(){
        clearInterval(timerID);
    }
    
    $('#autoCarousel').flipster({
        itemContainer: 			'ul',
        itemSelector: 			'li',
        enableMousewheel: 	true,
        enableNavButtons: 	true
    });
    
    // マウスが乗ったらタイマー停止、はずれたら開始
    $('#autoCarousel').on({
        mouseenter: stopTimer,
        mouseleave: startTimer
    });
    
    startTimer();
});

8~10行目でタイマー処理の関数を作成し、11~13行目でタイマーの停止処理の関数を作成。23~26行目でマウスが乗ったり離れたりした時の処理を書いています。
これで、クリックした途端にタイマーが発動して切り替わるという心配がなくなりそうです(もちろん、マウスを載せていても自動切り替え処理をいれたいという場合には別の処理が必要ですが)。

以下、サンプルページ。
自動カルーセル切り替え

コメント

  1. 今夜はカシオレのみ より:

    まさにしたかったことです。
    動く3Dスライダーを探すこと2日間。
    ふとjpueryで動かせるかと思考を変えた矢先にこちらの記事に辿り着きました。
    これで安心して休めます。
    ありがとうございます!

  2. 今夜はカシオレのみ より:

    こちらのページを参考にスライダーを設置しました。問題なく稼働しているのですが、画像をクリックしリンク先に飛んで戻るボタンで戻って来た際にループが停止しています。
    再度ループするにはどの様にすればよろしいのでしょうか?
    お手すきの際にご返答頂けましたら幸いです。

タイトルとURLをコピーしました