HTMLとCSSのメモ（コピペ用）
HOMEに戻る

複数の画像リンク（バナー等）をフェード効果で切り替えるJavaScript

JS

アフィリエイト広告などのバナーを複数設置し、自動で切り替える方法。

下記はレクタングルバナー（300px x 250px）を表示するサンプルコードです。
サイズが異なる場合は、拡大（または縮小）して範囲内で表示します。はみ出た部分は、”overflow:hidden”で見切れるようにしています。

例）5つのレクタングルバナーを順番にフェードして表示するサンプルコード

HTML
<div class="banner-rotator">
  <div class="banner-item">
    <a href="https://example.com/1"><img src="banner1.jpg" alt="バナー1" class="banner"></a>
  </div>
  <div class="banner-item">
    <a href="https://example.com/2"><img src="banner2.jpg" alt="バナー2" class="banner"></a>
  </div>
  <div class="banner-item">
    <a href="https://example.com/3"><img src="banner3.jpg" alt="バナー3" class="banner"></a>
  </div>
  <div class="banner-item">
    <a href="https://example.com/4"><img src="banner4.jpg" alt="バナー4" class="banner"></a>
  </div>
  <div class="banner-item">
    <a href="https://example.com/5"><img src="banner5.jpg" alt="バナー5" class="banner"></a>
  </div>
</div>
CSS
.banner-rotator {
  position: relative;
  width: 300px; /*表示領域：幅*/
  height: 250px; /*表示領域：高さ*/
  margin: 0 auto;
  overflow: hidden; /*見切れた部分は非表示*/
}
.banner-rotator .banner-item{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.banner-rotator .banner-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

javascript（インライン記述する場合）

JavaScript
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const items = document.querySelectorAll(".banner-rotator .banner-item");
    let index = 0;

    function showNextBanner() {
      items.forEach((item, i) => {
        item.style.opacity = i === index ? 1 : 0;
      });
      index = (index + 1) % items.length;
    }

    showNextBanner(); // 最初のバナー表示
    setInterval(showNextBanner, 3000); // 3秒ごとに切り替え
  });
</script>

※javascriptは外部ファイル化も可能。

例）banner-rotator.js として外部ファイル化（utf-8 BOMなしで保存）

JavaScript
document.addEventListener("DOMContentLoaded", function () {
  const items = document.querySelectorAll(".banner-rotator .banner-item");
  let index = 0;

  function showNextBanner() {
    items.forEach((item, i) => {
      item.style.opacity = i === index ? 1 : 0;
    });
    index = (index + 1) % items.length;
  }

  showNextBanner(); // 最初のバナー表示
  setInterval(showNextBanner, 3000); // 3秒ごとに切り替え
});

javascriptを外部化した場合は、下記コードも記述する。

HTML
<script src="js/banner-rotator.js"></script>

前で読み込んでもOK。
※javascriptのパスは自分の環境に合わせる

デモページはこちら