画像が横に流れて切り替わるスライダー | 動かして学ぶ PHP・jQuery 入門サンプル帳

解説コードを読んでみよう

このサンプルでわかること

「のぞき窓」と「横長の帯」でスライダーを作る考え方
jQuery の animate() で要素を動かす方法
setInterval() で同じ処理を一定時間ごとにくり返す方法

使っているファイル

index.phpデモのページ（HTML・CSS・JavaScript）
slide1.png 〜 slide3.png流す画像（どれも 468×60 ピクセル）

しくみ：のぞき窓の後ろで、帯を左へずらす

スライダーは「画像1枚分の大きさののぞき窓」と、その後ろに置いた「画像を横一列に並べた帯」でできています。帯を1枚分ずつ左へずらすと、窓から見える画像が切り替わって見えます。

1. HTML：窓（.slider）と帯（.slider__track）

index.php（13〜19行目） PHP

<div class="slider">
  <ul class="slider__track">
    <li><img src="slide1.png" width="468" height="60" alt="1枚目"></li>
    <li><img src="slide2.png" width="468" height="60" alt="2枚目"></li>
    <li><img src="slide3.png" width="468" height="60" alt="3枚目"></li>
  </ul>
</div>

2. CSS：はみ出た部分を隠す

窓には overflow: hidden; を指定して、はみ出した画像を見えなくします。帯は position: absolute; にして、left の値を変えることで左右に動かせるようにします。38行目の flex: none; は、横に並べた画像が枠の幅に合わせて縮んでしまわないようにする指定です。

index.php（21〜40行目） CSS

<style>
.slider {
  position: relative;   /* 中の .slider__track を、この枠を基準に動かす */
  overflow: hidden;     /* 枠からはみ出した画像は見せない */
  width: 468px;
  height: 60px;
  max-width: 100%;
}
.slider__track {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;        /* 画像を横一列に並べる */
  margin: 0;
  padding: 0;
  list-style: none;
}
.slider__track li { flex: none; }        /* 画像を縮めずに並べる */
.slider__track img { display: block; max-width: none; }
</style>

3. JavaScript：一定時間ごとに1枚分ずらす

index.php（44〜69行目） PHP


    function slide(sec) {
        var track = $('.slider__track');
        var items = track.children('li');
        var width = items.first().outerWidth();   // 画像1枚分の幅
        var length = items.length;                 // 画像の枚数
        var count = 0;

        // 最後の画像の次にも1枚目が見えるよう、同じ画像をうしろにコピーしておく
        items.clone().appendTo(track);

        setInterval(function() {
            count++;
            // 1枚分だけ左へ動かす
            track.animate({ left: -width * count }, 'slow', function() {
                // 全部流れたら、こっそり最初の位置に戻す
                if (count === length) {
                    track.css({ left: 0 });
                    count = 0;
                }
            });
        }, sec);
    }

    slide(2000);   // 2000ミリ秒 = 2秒ごとに切り替え
});

行	していること
48〜49行目	画像1枚の幅と枚数を調べておく
53行目	画像をコピーして帯の後ろにつなげる（3枚目の次に1枚目が見えるようにするため）
55行目	`setInterval(処理, ミリ秒)` で、指定した時間ごとに処理をくり返す
58行目	`animate({ left: … }, 'slow')` で帯をゆっくり左へ動かす
60〜63行目	3枚分流れたら、帯を一瞬で最初の位置（`left: 0`）に戻す

60〜63行目で一瞬で戻しても気づかれないのは、53行目で同じ画像をうしろにコピーしておいたからです。「3枚目の次のコピーの1枚目」と「本物の1枚目」は同じ見た目なので、すり替えても切れ目なくループして見えます。

画像を1枚増やして4枚にしても、JavaScript はそのまま動きます（枚数は自動で数えています）。slide(2000) の数字を変えて、切り替えの間隔も変えてみましょう。