▲TOPへ戻る

【javascript】イメージスライダー、画像をフワッと切り替え、ちょっと拡大させる

イメージスライダー
目次

    やりたいこと

    以下のように、画像をフワッと切り替えて、その後、 少し拡大させるイメージスライダーの方法をご紹介します。

    HTML

    ここでは画像を3枚使っています。 1枚目は最初からactve のクラスを付与しておきます。

    <div class="top">
      <img src="画像のURL" class="active" />
      <img src="画像のURL" />
      <img src="画像のURL" />
    </div>

    CSS

    ポイントとなるCSSだけ紹介します。

    .top{
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden; /* 親要素からはみ出したものを非表示 */
    }
    .top img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      opacity: 0; /* 非表示 */
      z-index: 10;
      transition: opacity 1.2s ease;
    }
    .top img.active {
      opacity: 1; /* クラスactiveが付与されたら表示 */
      z-index: 100;
      animation: ani 10s; /* アニメーション */
    }
    
    @keyframes ani {
      100% {
        scale: 108%;  /* 10sかけて拡大 */
      }
    }

    javaScript

    10行目: 1秒後にクラスを削除させないと、不自然に切り替わってしまう。

    16行目: 画像枚数に応じて数値を変えてください。画像が3枚であれば2

    const img = document.querySelectorAll(".top img"); // 画像を取得
    
    let cnt = 1; // カウンターは最初1に設定
    
    function slideImg() {
      for (let i = 0; i < img.length; i++) {
        if (i == cnt) {
          img[cnt].classList.add("active");
        } else {
          setTimeout(() => { // 1秒後にactiveを削除
            img[i].classList.remove("active");
          }, 1000);
        }
      }
      cnt++;
      if (cnt > 2) cnt = 0; // 画像枚数(3)-1=2
    }
    setInterval(slideImg, 4000); // 4秒ごとに切り替える

    参考

    js
    【javascript】setIntervalと、それを停止させるclearIntervalの使い方

    まとめ

    1. 表示させる画像にクラスactiveを付与。
    2. 1秒後にクラスactiveを削除することでなめらかに切り替わる。
    3. カウンターの設定は画像枚数-1

    profile

    パソコン好きなガオ

    コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

    パソコン

    javascript

    カメラ

    ブログ