jQueryでフレーム毎に表示時間を変更できるスライドショーのプラグイン

jQuery

サイトのメインビジュアルをスライド表示にした場合、最後のフレームでためを作りたい場合があります。そんな場合は、フレーム毎で表示時間を変更できる「mainVisual_slide」をカスタマイズして使ってください。

サンプルの確認とダウンロードができます。

以前、急遽必要になり作りましたが、フレーム枚数の変更時に面倒なのでバージョンアップしたいと思いつつ放置(笑)

でも、とりあえず使えます。

PR

mainVisual_slideを使ったサンプル

このブログの記事用にアップロードしていた画像を4つ使ってサンプルを作ってみました。4枚目のWEB-LABOのロゴを長めにしています。




 

 

 

mainVisual_slideのダウンロードはコチラ

 

使い方

mainVisual_slide.zipをダウンロードして解凍します。

HTMLの記述

HTMLのHEAD部分には、jQuery本体、mainVisual_slideのJSとCSSの読み込みを記述します。

 

img要素には、id要素で「pic1」から「pic2」「pic3」と連番を振って、ラッパー要素(親要素)には、「slide」というid名をつけます。
※画像のファイル名は、id名と合わせる必要はありません。

 

mainVisual_slide.jsのカスタマイズ

まずは、変数や配列へのパラメータの設定です。

ここで、各スライドの表示時間やフェードイン・フェードアウトの設定を行います。この時、1000が1秒間になります。5秒間表示したければ5000を設定します。

配列のdispTMが各スライドの表示時間になります。サンプルでは、1枚目から3枚目までは3秒、最後の4枚目は8秒表示するようになっています。

フェードインやフェードアウトについてもスライドごとに設定できますが、表示時間との関係もあるので試しながら使ってください。

 

続いて、各スライドの関数部分です。
スライドが4枚であれば変更する必要はありません。

 

スライドが3枚の場合
シーン4の関数部分を削除して、26行を修正します。

【修正前】setTimeout(function(){scene4();},dispTM[2]);
  ↓
【修正後】setTimeout(function(){scene1();},dispTM[2]);

これにより、3枚目から1枚目に戻るようになります。

 

スライドが5枚の場合
まずは、パラメータ用の配列に5枚目用を追加します。
各配列の要素数が5つになるようにしてください。

 

【33行目修正前】setTimeout(function(){scene1();},dispTM[3]);
  ↓
【33行目修正後】setTimeout(function(){scene5();},dispTM[3]);

5枚目のスライドが追加されたので、33行目の「scene1();」を「scene5();」に変更します。

 

続いてシーン4の関数を丸々コピペしてシーン5用の関数を作ります。

  シーン4からシーン5へ切り替わり、シーン1へ戻るように修正します。

PR

関連記事