【初心者】JavaScriptで画像スライド(カルーセル)するプログラミングを解説【プログラミング初心者の入門講座】

2020年5月29日システムJavaScript,プログラミング初心者

【初心者】JavaScriptで画像スライド(カルーセル)するプログラミングを解説【プログラミング初心者の入門講座】
【初心者】JavaScriptで画像スライド(カルーセル)するプログラミングを解説【プログラミング初心者の入門講座】

どうも、UT(@ut_1029)です。

JavaScript画像スライド(カルーセル)するプログラミングの解説です。

前回の「JavaScriptのslick.jsで画像スライド(カルーセル)するプログラミングを解説」ではslick.jsを使って実装しましたが、今回はJQueryで実装してみました。

JavaScriptで画像スライダー〜カルーセル〜

JavaScriptで画像スライド(カルーセル)するプログラミングのサンプルコード

JavaScript画像スライドするプログラミングのサンプルコードです。

<html>
<head>
    <meta charset="UTF-8">
    <title>Sample Image Slider</title>
    <style>
        body {
            text-align: center;
        }
        #slider {
            overflow: hidden;
            width: 310px;
            border: 1px solid #000;
            margin: 10px auto;
            padding: 0px;
        }
        #photos {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        #photos li {
            display: inline-box;
            float: left;
            width: 300px;
            margin: 5px;
            padding: 0px;
        }
        #photos li img {
            width: 300px;
            border: 1px solid #000;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <h1>Sample Image Slider</h1>

    <div id="slider">
        <ul id="photos">
            <li><img src="img/1.jpg" alt="Sample1"></li>
            <li><img src="img/2.jpg" alt="Sample2"></li>
            <li><img src="img/3.jpg" alt="Sample3"></li>
        </ul>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var $photos = $('#photos'),
                $lis    = $('#photos li');

            var li_count = $lis.length;
            var li_width = $lis.width() + parseInt($lis.css('margin-left'), 10) + parseInt($lis.css('margin-right'), 10);

            $photos.css('width', (li_width * li_count) + 'px');

            setInterval(function () {
                $photos.stop().animate({
                    marginLeft: parseInt($photos.css('margin-left'), 10) - li_width + 'px'
                }, function () {
                    $photos.css('margin-left', '0px');
                    $photos.find('li:first').appendTo($photos);
                });
            }, 1500);
        });
    </script>
</body>
</html>

JavaScriptで画像スライド(カルーセル)するプログラミング解説

JavaScript画像スライドするプログラミングのサンプルコードを解説します。

HTML部分

文字コードを指定

HTMLheadタグ内にmetaタグcharset(文字コード)をUTF-8に指定します。

<meta charset="utf-8">

Webページ文字化けする原因は、大体がmetaタグ文字コードを指定出来ていない事が多いです。

画像リストを作成

ulタグで画像のリストを用意します。

<ul id="photos">
    <li><img src="img/1.jpg" alt="Sample1"></li>
    <li><img src="img/2.jpg" alt="Sample2"></li>
    <li><img src="img/3.jpg" alt="Sample3"></li>
</ul>

JQueryをCDNで読み込む

JQueryCDNで読み込むようにしました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
CDNとは

Content Delivery Networkの略です。
簡単に言うと、リソース(CSSJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。
リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。

CSS部分

CSSについて解説します。

テキストをセンタリング表示

テキストをセンタリング表示するようにします。

body {
    text-align: center;
}

スライダーの枠組み

画像をスライドさせるスライダーの枠をスタイルします。

#slider {
    overflow: hidden;
    width: 310px;
    border: 1px solid #000;
    margin: 10px auto;
    padding: 0px;
}

ポイントは

  • overflow: hidden;
    • 表示幅を超えた部分を表示しないように。
  • width: 310px;
    • 表示幅を固定に。
      • ※overflow: hidden;するために固定にしています。

画像リスト

画像リストのスタイルを行います。

#photos {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
  • list-style-type: none;
    • liタグで表示される点を消します。

画像の枠組み

画像の枠組みをスタイルします。

#photos li {
    display: inline-box;
    float: left;
    width: 300px;
    margin: 5px;
    padding: 0px;
}
  • display: inline-box;
  • float: left;
    • 横並びになるように。

画像

画像のスタイルを調整します。

#photos li img {
    width: 300px;
    border: 1px solid #000;
    margin: 0px;
    padding: 0px;
}

JavaScript部分

JavaScript部分について解説します。

読み込み後に実行

読み込み後に実行するように$(document).ready();内に処理を記述していきます。

$(document).ready(function () {
});

HTMLのエレメントを取得

処理で必要となるHTMLのエレメントを取得します。

var $photos = $('#photos'),
    $lis    = $('#photos li');

画像リストの情報を取得

画像の数と横幅サイズを取得します。
(横幅サイズは、marginのサイズを加味している)

var li_count = $lis.length;
var li_width = $lis.width() + parseInt($lis.css('margin-left'), 10) + parseInt($lis.css('margin-right'), 10);

画像リストの横幅を指定

すべての画像を横並びにしたときに横幅ピッタリとなるように横幅を指定します。

$photos.css('width', (li_width * li_count) + 'px');

スライダー処理

画像を毎秒ごとに切り替わるようにスライド処理を実装します。

setInterval(function () {
    $photos.stop().animate({
        marginLeft: parseInt($photos.css('margin-left'), 10) - li_width + 'px'
    }, function () {
        $photos.css('margin-left', '0px');
        $photos.find('li:first').appendTo($photos);
    });
}, 1500);
  • marginLeft: parseInt($photos.css('margin-left’), 10) – li_width + 'px’
    • 右へ表示位置を画像1つ分移動させます。
  • $photos.css('margin-left’, '0px’);
    • 画像の表示位置を元の位置へ戻します。
  • $photos.find('li:first’).appendTo($photos);
    • 表示されなくなった一番左の画像を、一番右へ移動させます。
      • なので、画像の表示位置を元の位置へ戻しています。

おわり

今回はJavaScriptで画像スライダーを実装するサンプルプログラムを解説しました。

もっと楽に実装するならslick.jsというJavaScriptのライブラリーなどを利用する方法もあります。slick.jsを使用したサンプルは「JavaScriptのslick.jsで画像スライド(カルーセル)するプログラミングを解説」をぜひご覧ください。

プログラミング解説講座

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

UTの日常では、システム開発における LinuxPHPJavaScriptJQueryMySQLなどの知識やプログラミング技術、サーバ構築や運用などAWSをメインに知識を紹介しています。

内容としては、Webシステムの開発中や運用中に発生したトラブルやエラーの対応や解決方法をまとめた備忘録やWebシステム開発の方法を未経験者の人を対象に説明したプログラム教科書を記事にしています。
Webシステム開発の知識やプログラム技術の備忘録

2020年5月29日システムJavaScript,プログラミング初心者

Posted by UT