簡単すぎて拍子抜け!脱FlashしてjQueryでフェード付スライドショーを作る方法!

ども、ユウセイ(@wm_yousay)です。

たまたま知る機会がありましたので、備忘録を兼ねて。
誰かのお役にたてば幸いです。

フェード付スライドショーを超簡単に作る

スライドショーとかアニメーションとか、Flashが有名だと思います。
でも、iPhoneやiPadでは表示できないですよね。

なので、脱Flashして、jQueryでスライドショーを作る方法をご紹介します。

参考にさせて頂いたのは、こちらのサイト↓

[JS]画像をクロスフェードで変更するスライドショーの超軽量スクリプト -Simplest Slideshow | コリス
JavaScriptを使用して、スライドショーを簡単に作ることができます。

まずはデモをご覧ください。
↓こんな感じのフェード付スライドショーが作れます。

宣伝も兼ねて作ってみました。
CASE-WONDERで絶賛販売中のiPhone用フェルトケースです。

それでは実装

まずはjQueryをダウンロードし、サーバーにアップします。

JQueryのダウンロード

ちなみにバージョンは1.8.2でした。
これをサーバーにアップし、ヘッダーにて指定します。


<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

アップしたjQueryのバージョンに気をつけて下さい。
続いて、フェードインのJavaScriptを指定します。


<script type="text/javascript">

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      3000);
});

</script>

上記の3000の部分で、画像が切り替わるタイミングを変更できます。

次に、スライドショーを構成します。
非常にシンプルなHTMLです。


<div class="fadein">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
</div>

今回は4枚の画像でスライドショーを作っていますが、何枚でもOKです。
上記の様に、画像を順番に指定するだけです。

忘れちゃいけないCSS

で、一応スライドショーは完成しているのですが、配置やサイズを指定しないとおかしなことになります。忘れずにCSSで指定しましょう。


<style type="text/css">

.fadein { position:relative; height:300px; width:400px; }
.fadein img { position:absolute; left:0; top:0; }

</style>

これで完成です。

慣れないうちは大変かもしれませんが、非常に簡単です。
画像を用意して、指定するだけでフェードイン付のスライドショーが完成するんですからオドロキですよね。

Flashを使いたくない、Flashで作るのめんどいって時に、この方法は是非オススメです。

コリスさん、本当に助かりました。

参考:[JS]画像をクロスフェードで変更するスライドショーの超軽量スクリプト -Simplest Slideshow | コリス

せば、これにて。

「編集後記」
ブログ記事内にコードを表示する方法が分からず、Twitterで@mst47さんに@OZPAさんの記事を教えて頂きました!
お二人に感謝です。

ソースコードをキレイに表示するWordPressプラグイン「SyntaxHighlighter Evolved」 | OZPAの表4
おつぱさんの記事、マジ参考になるわ〜

Related posts:

  1. ブログのオリジナルテーマ作成もいよいよ大詰め
  2. オリジナルテーマ、ようやく完成!?
  3. 軽く始めた自分を責めつづけたブログテーマ自作奮闘記
  4. WordPressのテーマ作りを更に学んでみます
  5. WordPressで運用するブログにローソンガジェットを設置する方法と注意点
  6. WPtouchのテーマをカスタマイズして、ソーシャルボタンとFacebookコメントフォームを設置する方法