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

2020年5月29日プログラムJavaScript,プログラムサンプル

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

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部分から解説をします。

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

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のスタイル調整など少し難易度が高めでした。

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

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

slick.jsを使った方法

slick.jsというライブラリを使うと楽に画像スライドを行うことができます。

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

＼プログラミングスクール受講メリット／

・メンターにすぐ聞けるので分からないところでつまづかない
・受講生同士で学び合いモチベーション維持しやすい
・就学後に就職支援や進路サポートを受けることが出来る

＼現役エンジニアによるサポート就職支援／
[ TechAcademy ]
の特徴・料金を確認
ユート
ユート

1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト

2020年5月29日プログラムJavaScript,プログラムサンプル

Posted by ユート