少し前にWWW Watchさんで紹介されていたJavaScript でバナーをクロスフェード表示というやつ。これくらいならjQueryだけでも実現できそうだなーと思って作ってみました。

かなり力技でやってますが一応動きます。jQueryのfadeInとfadeOutメソッドを使っています。なんかもっと上手いやりかたありそうだけど、「こうした方がいいよー」ってのがありましたら是非教えてくださいませ。ちょっといじれば簡単な画像のスライドショーみたいのも作れそうです。

以下HTMLとスクリプトです。

jQueryでクロスフェード

HTMLは下記のようになります。ulでくくってliの中に画像を入れています。必ずulにslideshowというidをつけて下さい。HTML側での設定はこれだけです。

<ul id="slideshow">
<li><img></li>
<li><img></li>
<li><img></li>
</ul>

CSSは下記のようになります。liを絶対配置position:absoluteを使って重ねています。

#slideshow{
   margin-top:100px;
   width:600px;
   position:relative;
}

#slideshow li{
   position:absolute;
   left:0;
   top:0;
   border:3px solid #000000;
}

#slideshow li img{
   vertical-align:bottom;
}

そしてスクリプトは下記のようになります。

$(function()
{
  $("#slideshow li:not(:first)").hide();
  $("#slideshow li:first").addClass("selected");
  var dim=1;
  var count = function(){
  var len =$("#slideshow").children().length;
     if(dim>=len){
         dim=1;
         crossfeadeF();
     }else{
        dim +=1;
     crossfeade();}
  }
  var crossfeade = function(){
$("#slideshow").children(".selected").fadeOut("3300").removeClass().next().fadeIn("slow").addClass("selected");
   };
   var crossfeadeF = function(){
$("#slideshow").children(".selected").fadeOut("3300").removeClass().siblings("li:first").fadeIn("slow").addClass("selected");
   };
   var intervalID = setInterval(count, 5000);
  }
);

今回は画像をliの中にいれてますが、テキストでも同様にできると思います。jQueryを使う時のお決まりですが上記スクリプトは必ずjQueryを読み込んだ後に書くようにしてください。こんなのでも使ってみたいという方はご自由にどうぞ。

• jQueryでクロスフェードのデモ

関連エントリー

• jQueryを使ったアコーディオンメニュー
• 透過pngをIE6で使う方法いろいろとjQueryプラグイン
• 使えそうなjQueryプラグイン
• シマシマなテーブルをjQueryで作る
• コーディングコンテストの種明かし
• jQueryを使ってCSS切替機能を実装
• jQueryでフォントサイズ切替機能
• IE6で隣接セレクタを使うには
• 画像置換とSEOスパムの境界線
• ブラウザ間の差異をなくすCSSリセット

• Category
  • Ajax
  • jQuery
• 1 件のコメント
• TrackBack URL

このエントリーのトラックバックURL

http://www.lllcolor.com/web/jquery/87.html/trackback