HTMLカルーセル画像の作り方

インターネットの急速な発展に伴い、Web サイトの制作はますます人気が高まっており、カルーセル画像は Web サイトをより鮮やかで活気のあるものにする非常に一般的な Web サイト要素です。単純な HTML カルーセルを実装するにはどうすればよいですか?見てみましょう。

まず、新しい HTML ドキュメントで、head に .css ファイルと .js ファイルを導入し、body に新しい div を作成し、class 属性と id 属性を追加します。

  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>



  <div class="slider" id="slider">
    <!--轮播图内容-->
  </div>

次に、.css ファイルで、カルーセル画像のスタイルを設定します。 1000×500のカルーセル画像を例にとると、カルーセル画像のサイズと位置、画像の幅と高さ、画像の初期位置とアニメーションの変更時間を設定する必要があります。カルーセル画像で。

.slider {
  width: 1000px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border: 2px solid #ddd;
}

.slider img {
  width: 1000px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 500ms ease-in-out;
}

.slider img.active {
  opacity: 1;
  z-index: 1;
}

.js ファイルに、カルーセル コードを追加します。まず、現在表示されている画像を追跡する変数を定義します。次に、5000 ミリ秒後に次の画像に切り替わるようにタイマーを設定します。最後に、現在のイメージのクラスを更新して、現在のイメージがアクティブ クラスに追加され、不透明度が変更されます。

var slider = document.getElementById("slider");
var images = slider.getElementsByTagName("img");

var counter = 0;

setInterval(function() {
  images[counter].classList.remove("active");
  counter++;
  if (counter == images.length) {
    counter = 0;
  }
  images[counter].classList.add("active");
}, 5000);

最後に、以下に示すように、スライダー div に image 要素を追加するだけです。

<div class="slider" id="slider">
  <img  class="active lazy" src="/static/imghwm/default1.png" data-src="img1.jpg" alt="HTMLカルーセル画像の作り方" >
  <img  src="/static/imghwm/default1.png" data-src="img2.jpg" class="lazy" alt="HTMLカルーセル画像の作り方" >
  <img  src="/static/imghwm/default1.png" data-src="img3.jpg" class="lazy" alt="HTMLカルーセル画像の作り方" >
</div>

これは、単純な HTML カルーセル画像を実装するプロセスです。 Web サイトで一般的に使用される要素であるカルーセル画像は、Web サイトの視覚的なエクスペリエンスを高めるだけでなく、Web サイトのユーザー エクスペリエンスも向上させます。独自のカルーセルの作成を始めましょう!

以上がHTMLカルーセル画像の作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。