CSS を使用して簡単な画像切り替え効果を実現する方法

CSS はフロントエンド開発において最も重要なテクノロジーの 1 つであり、さまざまなスタイルやアニメーションを実現できます。その中で、Webサイトのカルーセルやスライドなど、画像の切り替えも一般的な要件です。今回はCSSを使って簡単に画像切り替え効果を実現する方法を紹介します。

1. HTML 構造

まず、Web ページに画像を追加し、それらに異なる ID またはクラスを割り当てる必要があります。

<div class="slider">
  <img id="img1" src="image1.jpg" alt="Image 1">
  <img id="img2" src="image2.jpg" alt="Image 2">
  <img id="img3" src="image3.jpg" alt="Image 3">
</div>

ご覧のとおり、便宜上、<div> タグ内で class="slider" を使用しています。それらの中の要素を操作します。 <img> タグの ID 属性と src 属性は、それぞれ画像の一意の識別子とソース パスを指定します。

2. CSS スタイル

次に、各画像の CSS スタイルを設定し、CSS セレクターを使用して切り替える必要があります。以下はサンプルコードです:

.slider {
  position: relative;
  height: 400px;
  width: 600px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slider img:first-child {
  opacity: 1;
}

.slider img.active {
  opacity: 1;
}

まず、class="slider" の <div> タグに高さを含むいくつかの基本スタイルを設定します。幅を調整してオーバーフローコンテンツを非表示にします。次に、各画像のスタイル（絶対位置、透明度 0、トランジション効果など）を設定します。このうち、.slider img:first-child セレクターは、最初の画像がアクティブであること、つまり Web ページに表示されていることを示します。

3. JS インタラクション

最後に、画像の切り替えを実現するために、JavaScript インタラクションを Web ページに追加する必要があります。以下はサンプル コードです。

var currentImg = 1;
var totalImg = $(".slider img").length;

function changeImg() {
  setInterval(function() {
    currentImg++;
    if (currentImg > totalImg) {
      currentImg = 1;
    }
    $(".slider img").removeClass("active");
    $("#img"+currentImg).addClass("active");
  }, 5000);
}

$(document).ready(function() {
  changeImg();
});

このコードの目的は、現在の画像を表す変数 currentImg と、現在の画像を表す変数 totalImg を定義することです。写真の総数。次に、setInterval 関数を使用して、一定の間隔 (この場合は 5 秒) で changeImg 関数を呼び出します。この関数では、まず現在の画像を更新し、合計数を超えているかどうかを確認してから、CSS セレクターを使用してすべての画像の active クラス名を削除し、そのクラス名を現在の画像に追加します。最後に、Web ページの読み込み時に changeImg 関数を呼び出して画像の切り替えを開始します。

4. エフェクトの表示

上記の 3 つの手順を実行すると、簡単な画像切り替えエフェクトを実現できます。参考までにデモンストレーション効果を示します。

HTMLコード:

<div class="slider">
  <img id="img1" src="https://source.unsplash.com/random/600x400" alt="Image 1">
  <img id="img2" src="https://source.unsplash.com/random/600x401" alt="Image 2">
  <img id="img3" src="https://source.unsplash.com/random/600x402" alt="Image 3">
</div>

CSSコード:

.slider {
  position: relative;
  height: 400px;
  width: 600px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slider img:first-child {
  opacity: 1;
}

.slider img.active {
  opacity: 1;
}

JSコード:

var currentImg = 1;
var totalImg = $(".slider img").length;

function changeImg() {
  setInterval(function() {
    currentImg++;
    if (currentImg > totalImg) {
      currentImg = 1;
    }
    $(".slider img").removeClass("active");
    $("#img"+currentImg).addClass("active");
  }, 5000);
}

$(document).ready(function() {
  changeImg();
});

エフェクト表示: https://codepen.io/fangzhou/pen /oQJNEN

まとめると、CSS を使用して画像切り替え効果を実現するのは難しいことではなく、いくつかの基本的な知識とスキルを習得するだけで済みます。もちろん、実際の開発にはより複雑な状況が含まれる場合があり、継続的な学習と練習が必要です。

以上がCSS を使用して簡単な画像切り替え効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。