jqueryを使ったシンプルなスライドショー
元ネタはhttp://findaway-i.jp/web-design/slideshow/725.htmlです。
あまりにも簡単に設置ができるので転載させていただきました。
Flash代わりにいかがですか?
スライドショーを表示したい部分のHTMLファイルに
1 2 3 4 5 |
<div id="slideshow"> <img src="img/img1.jpg" alt="" /> <img src="img/img2.jpg" alt="" /> <img src="img/img3.jpg" alt="" /> </div> |
CSSは
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#slideshow { position:relative; height:350px; } #slideshow IMG { position:absolute; top:0; left:0; z-index:8; } #slideshow IMG.active { z-index:10; } #slideshow IMG.last-active { z-index:9; } |
HTMLファイルの<head>内に
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); }); </script> |
を入力するだけでできます。
ディスカッション
コメント一覧
まだ、コメントがありません