社員ブログ

jQueryでシンプルなスライドショーを自作しようの巻

2013年10月19日 土曜日

「普段プラグインを使っているけど、自分でスライドショーを組んでみたい!」という人へ!jQueryの勉強になりました〜。

1、jQueryを読み込む

<script "text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

2、htmlを記述。画像を読み込みます。

<div id="stage">
    <img src="img1.jpg" id="img1">
    <img src="img2.jpg" id="img2">
    <img src="img3.jpg" id="img3">
</div>

3、cssを記述。 absoluteを指定して画像を重ね、一枚目のみ表示します。

<!-- css -->
<style type="text/css">
/*  一度画像を全てを非表示にして、absoluteを指定して画像を重ねる */
    #stage img{
        display:none;
        position: absolute;
    }

    #stage #img1{
        /* 1枚目の画像だけを表示 */
        display:block;
    }
</style>

4、jQueryを記述。setInterval()で画像入れ替え処理を繰り返します。

<script type="text/javascript">
    var flg=1;    //flgに初期値1をセット

    $(function(){

        setInterval(function() {
            switch(flg){
                case 1: //flgが1の場合
                    //1枚目から2枚目に切り替え
                    $("#img1").fadeOut(2000);
                    $("#img2").fadeIn(2000);
                    break;

                case 2: //flgが2の場合
                    //2枚目から3枚目に切り替え
                    $("#img2").fadeOut(2000);
                    $("#img3").fadeIn(2000);
                    break;

                case 3: //flgが3の場合
                    //3枚目から1枚目に切り替え
                    $("#img3").fadeOut(2000);
                    $("#img1").fadeIn(2000);
                    break;
            }

            flg++;
            if(flg>3){
                flg=1;    //flgが3を越えたら1に戻る
            }

        }, 3500);    //setInterval()で3.5秒間隔で繰り返し実行する
    });
</script>
Trackback URL
文字サイズサイズ小サイズ中サイズ大