[み]jQueryで画像がフェードイン・フェードアウトするスライドショーを実装する方法

jQueryで画像がフェードイン・フェードアウトするスライドショーを実装する方法を紹介します。画像がスライドするようなスライドショーは、いろんなプラグインがあるのでたくさん紹介されていますが、フェードイン・フェードアウトで切り替わるものはGoogle先生に聞いてもなかなか見つけられなかったので、メモとして残します。

フェードイン・フェードアウトで画像が切り替わるスライドショー

まずは、デモをごらんください。
DEMO

今回のデモで使用した画像は、ぱくたそさんのを使いました。
ぱくたそ-フリー写真素材・無料ダウンロード

html

<div id="pics">
    <ul>
        <li><img src="images/01.jpg"></li>
        <li><img src="images/02.jpg"></li>
        <li><img src="images/03.jpg"></li>
        <li><img src="images/04.jpg"></li>
        <li><img src="images/05.jpg"></li>
        <li><img src="images/06.jpg"></li>
        <li><img src="images/07.jpg"></li>
        <li><img src="images/08.jpg"></li>
    </ul>
</div>

スライドショーを表示したところにidをつけて、フェードイン・フェードアウトで切り替えたい画像をリストで並べています。ちなみに、ニーズがあるかはわかりませんが、画像はいくつでもOKです。

それと、jQueryの読み込みもお忘れなく。

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

CSS

#pics {
    width: 900px;
    height: 600px;
    position: relative;
}

画像を表示するボックスをサイズを指定するとともに、position: relative; にしておきます。

JavaScript(jQuery)

$(function(){
    var $interval = 2000; // 切り替わりの間隔(ミリ秒)
    var $fade_speed = 1000; // フェード処理の早さ(ミリ秒)
    $("#pics ul li").css({"position":"relative","overflow":"hidden"});
    $("#pics ul li").hide().css({"position":"absolute","top":0,"left":0});
    $("#pics ul li:first").addClass("active").show();
    setInterval(function(){
        var $active = $("#pics ul li.active");
        var $next = $active.next("li").length?$active.next("li"):$("#pics ul li:first");
        $active.fadeOut($fade_speed).removeClass("active");
        $next.fadeIn($fade_speed).addClass("active");
    },$interval);
});

htmlのコードをコピペして使う場合は、このままでOKです。必要に応じて、#picsの部分を変更してください。

jQueryを勉強しましょう

htmlとかCSSとかはなんとなくわかってきたんだけど、jQueryって聞くとなかなか手がでない… そんな方はきっとたくさんいますよねw でも、jQueryって、実はカンタンなんです。

でも、jQuery 日本語リファレンスとか見ても、これをどう使ったらいいのかいまいちピンとこない… ええ、たしかにそうですよね。ある程度わかってくると、リファレンス見ても理解できるんですが、最初のとっかかりとしては、なかなか難しいと思います。

なので、そんな方には、本をおススメします。KindleとかKoboとか電子書籍がこれだけ世の中に広まったというのに、紙の本をおススメします!

実際にWebサイトでの使用例が載っているので、jQueryってこんなことできるんだ!という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

editNEW エントリー

PAGE TOP arrowup