JavaScriptで画像を横移動する画像スライダーのプログラム解説【JQuery】

2020年5月29日システムJavaScript,プログラムコード,プログラム入門

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

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

JavaScriptで画像を横移動させるスライドショーのプログラミングを解説です。

プログラミング歴

この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細:プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと

JavaScriptの画像スライダーで横移動させるプログラム解説

JavaScriptで画像を横移動させるスライドショーのプログラミングを解説します。

JavaScriptの画像スライドはWebページに動きを持たせる基本です。

画像スライドで習得できること

  • JavaScriptでWebページに動きを持たせる基本スキル
  • JavaScriptのアニメーション制御の基本スキル

ぜひチャレンジしてください。

slick.jsを使った方法

slick.jsというライブラリを使うと楽に画像スライドを行うことができます。(ただJavaScriptプログラムの勉強だったらslick.jsを使わないでチャレンジしてみてください!)

サンプルコード【JavaScriptで画像スライダー】

では、さっそくJavaScriptで画像を横移動させるスライドショーのサンプルコードから紹介します。
(基本的に画像パス以外はコピペで動くと思います。)

今回はHTMLタグの追加などを簡単に行えるように「JQuery」を使っています。

<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>

HTML部分の解説【JavaScriptで画像スライダー】

JavaScriptで画像を横移動させるスライドショーするサンプルコードのHTML部分から解説をします。

細かく解説していきます!

文字コードを指定

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

<meta charset="UTF-8">
metaタグでcharsetを指定する理由

metaタグでcharset(文字コード)を指定しないとWebページが文字化けする原因となります。

画像リストを作成

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で読み込む

JavaScriptでHTMLタグの追加を簡単に行えるようにJQueryを読み込みます。JQueryをCDNで読み込みます。

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

Content Delivery Networkの略です。
リソース(CSSやJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。
簡単にいうと「高速にリソース(CSSやJQuery)を外部サーバから取得できる」って感じです。

CSS部分の解説【JavaScriptで画像スライダー】

JavaScriptで画像を横移動させるスライドショーするサンプルコードのCSS部分から解説をします。

スタイル調整で大事なポイントに絞って解説します。

styleタグを用意してスタイルを定義

スタイルを記述するためにstyleタグを記述します。

<style>
・・・
</style>

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

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

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で画像スライダー】

JavaScriptで画像を横移動させるスライドショーするサンプルコードのJavaScript部分から解説をします。

ここからが本番!1つ1つゆっくり理解できるよう解説していきます。

scriptタグを用意してJavaScriptのプログラムを始める

JavaScriptでプログラムコードを記述するためにscriptタグを記述します。

<script>
・・・
</script>

読み込み後に実行

読み込み後に実行するように$(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);
  • var li_count = $lis.length;
    • 画像リストの数を取得
  • var li_width = $lis.width() + parseInt($lis.css('margin-left’), 10) + parseInt($lis.css('margin-right’), 10);
    • $lis.width()
      • 画像リストの横幅を取得
    • parseInt($lis.css('margin-left’), 10)
      • 画像リストに指定されている左マージン幅を取得
      • そしてparseIntで数値へ変換
    • parseInt($lis.css('margin-right’), 10)
      • 画像リストに指定されている右マージン幅を取得
      • そしてparseIntで数値へ変換

画像の横スライドする際にmarginの余白の幅を考慮する必要があります。

画像リストの横幅を指定

すべての画像を横並びにした時に横幅ピッタリとなるように横幅をJavaScriptで微調整します。

$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);

このコードをもう少し細かく解説します。

この処理が画像スライドで重要なポイントです!

毎秒実行するようにする

setIntervalを使って1.5秒間隔で画像がスライドされるようにします。

setInterval(function () {
・・・
}, 1500);

横移動のアニメーションを定義

画像を横にスライドするアニメーションを定義します。

$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);

まとめ【JavaScriptで画像を横移動する画像スライダーのプログラム解説】

今回はJavaScriptで画像を横移動させるスライドショーするサンプルコードを解説しました。

Webページに動きを持たせる基礎的な技術をしっかり理解するとスキル向上になります!

画像スライドのポイント

画像を右へスライドさせた後に見切れた画像を右端へ移動させる

画像スライドのプログラムを終えた人へ

画像スライドは、JavaScriptのアニメーション処理やCSSのスタイル調整など少し難易度が高めでした。

理解を深めるために「画像枚数の増加」や「スライド間隔時間の変更」などカスタマイズして見てください!

最後まで読んでもらいありがとうございます。

JavaScriptで画像スライダー〜カルーセル〜
プログラミング基礎講座

UTの日常では、プログラミングを0から始める方法や基礎知識を解説しています。ぜひ他の記事もご覧ください。

プログラミング未経験から今すぐに始める方法について解説します。なにから始めたらいいのかわかない人は是非ご覧ください。

プログラミング未経験から独学で基礎勉強を始めた人向けに理解するコツやポイントをサンプルコードを使って解説します。

基礎学習ばかりだと勉強に飽きたり身につかなかったりします。プログラミング初心者からステップアップする基礎知識を使ったプログラムのサンプルコードをまとめて紹介します。

UT
UTの日常
UTの日常

1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想wだから実績が出ないorz)
UTのプロフィール
Amazon欲しいものリスト

2020年5月29日システムJavaScript,プログラムコード,プログラム入門

Posted by UT