自動/手動の両方に対応した
スライドショー。

自動＋切り替えボタン。

こんにちは、「ふ」です。
今回はスライドショーの画像切り替えに対して、自動/手動の両方に対応させる方法について紹介します。

webページのファーストビューなどでよく見かけると思います、一定時間ごとに自動で画像が切り替わっていく仕組み。

もちろん「自動切り替え」であるため、一定時間が過ぎないと次の画像に切り替わりません。
なので場合によっては、

「早く次の画像が見たい」
「さっきの画像をもう１度見たい」

と思うかもしれません。

〜そんなときのために、手動でも画像切り替えができるようになっていると、便利ですよね。
そういった「せっかちなユーザーさん」にも親切な実装をしてみましょう。

今回の実装は、以前紹介した手法を組み合わせて実現させています。
手順に従い、その都度リンクを貼っていますので、詳しく知りたい方は参考にしてみてください。

仕組みを考える。

自動＆手動スライドショーの動きを考えながら、実装に必要な仕組みを考えていきます。

ユーザが何もしていないときは自動切り替えが行われている状態。
これはフツーにsetIntervalを使えばよいでしょう。

ユーザが進む/戻るボタンを押したときには、順方向または逆方向に画像が１つぶんだけ切り替わるようにします。
このとき、ユーザ操作に忠実にスライドショーが反応するよう、setIntervalは中断させるようにしましょう。

ただし、進む/戻るボタンの操作をユーザがやめたとき。
スライドショーが止まったままになってしまいます。

「ユーザがボタンを押す」→「画像１つぶん切り替え完了」
→このあとにタイマー処理を再開させるようにましょう。ボタン操作をしなければ、一定時間ののちに自動スライドショーが開始されます。

かくして必要なものは、

■ ベースとなる自動スライドショーをsetIntervalで実装

■ 進むボタンを押したときの関数
setIntervalを一旦中止
順方向に画像１つぶん切り替わる
切り替わりが終了後、setIntervalを再開

■ 戻るボタンを押したときの関数
setIntervalを一旦中止
逆方向に画像１つぶん切り替わる
切り替わりが終了後、setIntervalを再開

〜の３つの実装です。

要素を配置。

自動スライドショーはsetIntervalを使ったものであれば、お好きなものを準備していただいて構いません。

自動スライドショー、 中央にきた画像を拡大表示。

2023.02.20
リクエストコーナー 〽️２。

「ふ」は以前の記事で紹介したものを利用することにしました。
詳しい仕組みについては、⬆︎の記事を参照してください。

「「３<!--可視範囲-->」」
<div id = "area">
    「「３<!--画像全体を横移動するためのグループ-->」」
    <div id = "images">
        <img src = "a.svg">
        <img src = "b.svg">
        <img src = "c.svg">
        <img src = "d.svg">
    </div>
</div>

#area {
    width:40%;
    margin:0 auto;
    overflow:hidden;
}

#images {
    display:flex;
    transform:translateX(-25%);
}

#images img {
    width:30%;
    padding:10%;
}

４つの画像を配置し、translateXですこし横移動。
現在の画像を真ん中、両隣が半分だけ見えている状態です。

「「３//画像のかたまりを取得」」
const images = document.getElementById("images");
let options = {
    duration:200
};

「「３//アニメーションのオプションとキーフレーム」」
let keyframes = [
    {transform:translateX(-25%)},
    {transform:translateX(-75%)}
];

「「３//画像を切り替えるアニメーション」」
function slide() {
    let change_img = images.animate(keyframes,options);
    change_img.onfinish = caterpiller;
}
「「３//切り替え後、エンドレス処理」」
function caterpiller() {
    images.appendChild(images.children[0]);
}

「「３//一定時間ごとに切り替えを実行」」
let auto = setInterval(slide,2000);

setIntervalで２sごとに画像１つぶん横移動させることで、スライドショーを実現しています。

ボタンを実装。

ベースとなる自動スライドショーができたので、ここに進む/戻るボタンを設置します。

<div id ="btnarea">
<img src = "modoru.svg" onclick = "「「５modoru()」」">
<img src = "susumu.svg" onclick = "「「５susumu()」」">
</div>

#btnarea {
    width:50%;
    margin:5% auto;
    display:flex;
    gap:60%;
}
#btnarea img {
    width:20%;
}

進む/戻るボタンにはonclick属性で関数「susumu」「modoru」を呼び出すようにしています。
２つの関数を書いていきましょう。

「進む」関数。

function susumu() {
    「「３//自動切り替えをストップ」」「「１....@1@」」
    if(auto) {
        clearInterval(auto);
    }

    「「３//順方向へ１つ切り替え」」「「１....@2@」」
    let susumu_ani = images.animate(keyframes,options);
    「「３//切り替え完了後、エンドレス処理」」「「１....@3@」」
    susumu_ani.onfinish = caterpiller;
    「「３//自動切り替えを再開」」「「１....@4@」」
    auto = setInterval(slide,2000);
}

進むボタンを押したときの関数「susumu」です。

@1@ はじめに、clearIntervalで自動切り替えを中断。

@2@ 画像群を順方向に１つスライドさせます。
アニメーションに関しては、自動切り替え用に作ったものをそのまま使います。

@3@ １つぶんのスライドが終了後、これも自動切り替えで使ったcaterpillar関数を呼び出してエンドレス処理を行います。


今回は４つの画像を用意して順方向/逆方向にエンドレスで切り替わるようにしています。処理の仕方については、⬇︎の記事で解説しています。

JavaScript、画像切り替えをループさせる。

〽️ ユーザに親切な切り替えを実装。

@4@ 一連の処理が完了したら、自動切り替えを再開させましょう。
これでボタンクリックが２秒以上されない場合には、自動で画像が切り替わるようになります。


setIntervalの中断と再開を実装する方法については、⬇︎の記事を参考にしてください。

「戻る」関数。

それでは戻るボタンを押したときの「modoru」関数を書いていきますが、その前に。
戻るボタンをクリックしたときには、画像を逆方向にスライドさせなくてはいけません。逆方向にスライドさせるアニメーションのキーフレームを用意しておきます。

let reverse_keyframes = [
    {transform:"translateX(-75%)},
    {transform:"translateX(-25%)}
];

これでOK。では関数を定義しましょう。

function modoru() {
    「「３//自動切り替えをストップ」」「「１....@5@」」
    if(auto) {
        clearInterval(auto);
    }
    
    「「３//切り替え前にエンドレス処理」」「「１....@6@」」
    images.insertBefore(images.children[images.children.length-1],images.children[0]);
    「「３//逆方向へ１つ切り替え」」「「１....@7@」」
    images.animate(reverse_keyframes,options);
    「「３//自動切り替えを再開」」「「１....@8@」」
    auto = setInterval(slide,2000);
}

@5@ 進む場合と同じく、自動切り替えを一旦中断。

@6@ 逆方向へのエンドレス処理ですが、今度はアニメーションさせる前に行う必要があります。
insertBeforeで末尾の画像要素を先頭に移動させましょう。

@7@ 先ほど用意した逆方向のキーフレームを使って、画像を切り替え。

@8@ これも進む場合と同じで、処理が完了後に自動切り替えを再開させます。

完成。

これで完成です。
自動切り替えが行われていますが、「進む」「戻る」ボタンを押してみてください。手動で切り替えることもできています。
ボタン操作をせずに２秒経過すると、自動切り替えが再開します。

集大成でした。

最後までお読みくださり、ありがとうございました。

今回は以前に紹介してきた「自動スライドショー」「setIntervalの停止と再開」「エンドレスな画像切り替え」の３つを合わせた「集大成」的な実装でした。本文中で紹介した記事も参考にして、webページのファーストビューを飾ってみてください。

ではまた〜 ♬