複数の要素をスライドさせるスライダー系の jQuery プラグインは沢山ありますが、それに比べると背景画像を切り替えてスライドショーしてくれるプラグインは選択肢が少なめです。求める機能がシンプルなので、軽くてサクサク動いてくれればそれでいい。開発者から見ると魅力的なフロンティアでは ないのかも知れませんね。

背景画像のスライドショー、一度はやってみたい。クールな画像が背景でトランジションすれば、サイト全体がクールになりそうな気がする。気がするだけ。実際は難しい。背景にコンテンツが負けちゃう。コンテンツではなくイメージを見せたいのなら いいのかも知れない。

閑話休題。
筆者が選んだのは BgSwitcher というプラグインです。日本人の方が開発者なので、日本語ドキュメントが有ります。ありがとうございます。

• 指定した背景画像をx秒毎に切り替えるjQueryプラグイン – Rewish

プチ改造してカスタマイズする内容

いざ使ってみたところ、一つだけ問題点がありました。

指定できるパラメータの、interval（切り替えの間隔）と、duration（エフェクトの時間）です。具体的には、interval より duration を長く設定すると、エフェクト（切り替え）が終わる前に、次の切り替えが始まってしまいます。

• interval 5秒 ＞ duration 1秒 ─ 問題なし
• interval 1秒 ＜ duration 5秒 ─ エフェクトが終わる前に次の切り替えが始まってしまう！

interval は前のエフェクトが終了してから 次のエフェクトを開始するまでの時間ではなく、前のエフェクトを開始してから 次のエフェクトを開始するまでの時間、になっています。

次から次へと休むことなく画像を切り替えたい場合、interval をゼロにするのではなく、duration と同じ値を指定することになります。これは設計のミスというよりは、おそらく実装するときに勘違いをされたのではないかなと思います。

1秒間隔で 5秒のエフェクトを繰り返したい場合、interval 6秒、duration 5秒とすることでニア イコールになりますが、最初の切り替えが始まるまで 6秒待つことになります。

前置きが長くなりましたが、interval を、前のエフェクトが終了してから 次のエフェクトを開始するまでの時間、になるようにコードを書き換えてみたいと思います。

変更部分は 2ヶ所

reflesh と start という名前のメソッドを書き換えます。
ハイライトした行が変更部分です。変更前の内容をコメントアウトしています。

version 0.4.3 のコードを元にしています

reflesh

    /**
     * Refresh
     */
    refresh: function() {
      this.setImages(this.config.images);
      this.setSwitchHandler(this.getBuiltInSwitchHandler());
      this._prepareSwitching();

      if (this.config.start) {
        //this.start();
        this._timerID = setTimeout($.proxy(this, 'next'), this.config.interval);
      }
    },

start

    /**
     * Start switching
     */
    start: function() {
      if (!this._timerID) {
        //this._timerID = setTimeout($.proxy(this, 'next'), this.config.interval);
        this._timerID = setTimeout($.proxy(this, 'next'), this.config.interval + this.config.duration );
      }
    },

おまけ

jQuery プラグインを紹介している記事でたまに目にする「～するプラグインを いくつか試して○○○○○が良かったので紹介します」てヤツ。他になんてプラグインを試したのか教えてくれないんですか、他と比べて それのどこが良かったのか教えてくれないんですか、て いつも思ってしまうので書きます。

いや気持ちは分かります。記事にする＝論理的に説明するって大変だ。適当に書くぐらいなら、いっそのこと書かない方がマシかも知れない。でも適当に書いちゃう。

他には以下のプラグインも見つけました。

• jQuery Unobtrusive Background Image Switcher
• MaxImage 2.0 — jQuery Cycle plugin as Fullscreen Background Slideshow

Unobtrusive の方は、機能的には BgSwitcher とほぼ同じです。デフォルトの切り替え間隔（timeout）が 12秒なのですが、デモ ページも そのままで、長い！ 長過ぎて 全然切り替わらないじゃん！ て思っちゃいました。

MaxImage 2.0 は、機能が多くて重そうな雰囲気がしたので やめました。雰囲気で判断するのはよくない。BgSwitcher は 12KB、MaxImage は 21KB。ほらね。いやいや、コードが長いからって重いとは限らない。やっぱり雰囲気。時には雰囲気で判断するのも仕方ない。