簡単!jQueryで作るシンプルなスライドショー

  • LINEで送る

Webサイトで最も目を引くところといえば,スライドショーではないでしょうか.企業や飲食,教育等のHPには必ずと言っていいほどスライドショーがあります.スライドショーはページの最上部に配置され,とても目を引くコンテンツです.今回はそのスライドショーを超簡単に作って行きます.超簡単なスライドショーなので,実装する機能は,一定経過時間ごとに画像が変わる機能のみとします.

サンプルページ

超簡単なスライドショーの動作イメージは下の図のような感じです.

最初はすべての画像を非表示にしておき,1枚ずつフェードイン,フェードアウトを繰り返していきます.なので,HTMLとCSSですべての画像を一つの場所に重ねて配置して置きましょう.

ファイルの構成は以下の通りです.jQuery関連のファイルはjsフォルダに入っています.

ファイル構成

HTML

<div id="container" role="main">
    <div id="slide-show">
        <img src="./img/cake.jpg" alt="" >
        <img src="./img/interior.jpg" alt="">
        <img src="./img/desk.jpg" alt="">
        <img src="./img/lunch.jpg" alt="">
    </div>
</div>

HTMLはメニューのところだけ,抜粋して表示しています.画像のファイルパスに気を付けましょう.

SCSS(CSS)

#slide-show {
    position: relative;

    img {
        position: absolute;
        display: none;
        left: 0;
        top: 0;
        width: 100%;
        height: 400px;
        object-fit: cover;
    }
}

このコードはSCSSのコードになるので,CSSにコンパイルします.サイト下のサンプルページのダウンロードファイルにはCSSに変換したものも用意してあります.

imgの親ボックスには{position: relative}を設定し,imgには{position: absolute}で全ての画像に対して,同じ場所に配置するようにします.初期状態は,全ての画像を非表示にするため,imgに{display: none}を設定しています.

jQuery(main.js)

$(function(){

    $('#slide-show').each(function(){

        var $slides = $(this).find('img'),
            slideCount = $slides.length,
            slideId = 0;
        
        $slides.eq(slideId).fadeIn();
        setInterval(showNextSlide, 3000);

        function showNextSlide(){
            var nextId = (slideId + 1) % slideCount;
            $slides.eq(slideId).fadeOut();
            $slides.eq(nextId).fadeIn();
            slideId = nextId;
        }

    });
});

変数は,「全てのスライド」,「スライドの数」,「現在のスライドを表す番号」の3つを定義しています.次の2行では,1番初めのスライドを表示させ,setInterval()メソッドを使ってshowNextSlide関数を3000msごとに実行します.

var nextId = (slideId + 1) % slideCount;

この行では商のあまりをつかって,0~4までの数字を割り当てています.最後のスライドの次は一番初めのスライドにしたいため,このような形をとっています.

あとは現在のスライドに対してfadeOut()メソッドを用いてゆっくり消し,次のスライドに対してfadeIn()メソッドで,ゆっくり出現させます.最後に現在のスライでIDを更新して終了です.

サンプルページはこちらからも見ることができます.

サンプルページのダウンロードフォルダはこちらからダウンロードできます.

侍エンジニア塾

最新の投稿

SNSでもご購読できます。

コメントを残す