jQueryゼロから / ナビ付きスライドショー

前回のスライドショーによくあるナビつけてみることに。
任意の写真をクリックで選べるようにします。

ナビをクリックすると自動再生されてるアニメーション(フェードイン・フェードアウト)を停止して、指定のスライドを表示、しばらく放置すると自動再生再開するようにします。
アニメーションは setInterval で再生しているので、clearInterval にて停止するだけ。アニメーション再開は一定時間操作しない時間帯を持ちたいので setTimeout で待機するようにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var interval;
// スライド再生
function startSlide(wait){
    wait = wait | 0;
    var intervalTime = 3000;
    setTimeout(function(){
        interval = setInterval(function(){
            // アニメーション処理
        }, intervalTime);
    }, wait);
}

// スライド停止
function stopSlide(){
    clearInterval(interval);
}

ナビのロールオーバーとかはJavaScriptのイベントじゃなく、CSSで設定するようにしました。
あとは意外にそんな前のと変わらんので、jQueryのプラグインにして、$(セレクタ).slide(オプション) でスライドショーになるようにしてみた。
サンプル

ナビ付きスライドショー – jsdo.it – share JavaScript, HTML5 and CSS