JavaScript は画像の自動再生を実装します

現在、インターネット技術の継続的な発展により、Web デザインは非常に重要な産業となっています。写真は非常に重要な要素として、ページを美しくし、情報伝達効果を高め、ユーザーの注意を引くためにページデザインでよく使用されます。ページ上にいくつかの動的な要素を表示すると、ページのコンテンツが充実するだけでなく、閲覧時のより直感的な感覚効果と優れたユーザー エクスペリエンスをユーザーに提供できます。この記事では、JavaScript で画像の自動再生を実装する方法を紹介します。

1. 自動カルーセルの原理

画像カルーセルは、その名前が示すように、複数の画像を自動的に再生および切り替えます。自動カルーセルの原理は、JavaScript タイマーの助けを借りて実現されます。カルーセルのページ数が決定されると、setInterval() 関数を使用して画像を定期的に切り替えます。カルーセルが無限の場合は、setTimeout() を使用して実装します。カルーセル効果を実現するための再帰呼び出し。

2. HTML 構造

自動カルーセルを実装するには、次のように HTML でループ コンテナーと画像を作成する必要があります:

<div class="carousel-container">
  <img src="/static/imghwm/default1.png"  data-src="images/pic1.png"  class="lazy" alt="image 1">
  <img src="/static/imghwm/default1.png"  data-src="images/pic2.png"  class="lazy" alt="image 2">
  <img src="/static/imghwm/default1.png"  data-src="images/pic3.png"  class="lazy" alt="image 3">
</div>

3. CSS スタイル

カルーセル コンテナのスタイルを次のように設定します:

.carousel-container{
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
}
.carousel-container img{
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.6s ease-in-out;
}
.carousel-container img.active{
  opacity: 1; 
}

4. JavaScript を使用してカルーセルを実装します

1. 画像とコンテナを取得します

var carouselContainer = document.querySelector('.carousel-container');
var carouselImgs = carouselContainer.querySelectorAll('img');

2. カルーセルの初期化

カルーセルを開始する前に、最初の画像にクラス名「active」を追加し、現在のカルーセル画像を表すカウンター インデックスを設定して、次のステップで次のカルーセル画像に切り替えることができます。 。 写真。

var index = 0;
carouselImgs[index].classList.add('active');

3. タイマーを設定する

カルーセル処理中、特定のタイミングで画像を切り替える必要があるため、無限カルーセルと制限付き回転の 2 つの実装方法を説明します。違いは、すべての画像の走査が完了した後に最初から走査を再開するかどうかです。

無限カルーセル:

setInterval(function(){
  index++;
  if(index >= carouselImgs.length){
    index = 0;
  }
  carouselImgs.forEach(function(img){
    img.classList.remove('active');
  });
  carouselImgs[index].classList.add('active');
}, 3000);

限定カルーセル:

var timer = setInterval(function(){
  index++;
  if(index >= carouselImgs.length){
    clearInterval(timer);
    return;
  }
  carouselImgs.forEach(function(img){
    img.classList.remove('active');
  });
  carouselImgs[index].classList.add('active');
}, 3000);

ここでわかるように、カウンター インデックスを設定することで、対応する位置が毎回確実に横断されるようにすることができます。同時に、次の画像が 3 秒ごとに回転するようにタイマーを設定します。

4. イベント リスナーの追加

画像をクリックして関連ページにジャンプしたいユーザーもいるかもしれませんが、この場合は画像にイベント リスナーを追加する必要があります。

carouselImgs.forEach(function(img){
  img.addEventListener('click', function(e){
    var targetURL = e.target.getAttribute('data-href');
    if(targetURL){
      window.location.href=targetURL;
    }
  });
});

ここでは、イベント監視でユーザーのクリック動作を監視し、「getAttribute()」メソッドで画像に対応するリンクを取得し、画像をクリックすると目的のページにジャンプします。

5. 概要

上記の手順を完了すると、画像の自動回転の効果を正常に実現できます。ただし、カルーセル画像はすべてのページで使用できるわけではなく、適切なシナリオと適切なデザインのみが良好な結果を生み出すことができることに注意してください。上記の方法で実現される自動画像カルーセル効果にも一定の制限があり、ページ上に同時に複数のカルーセル画像がある場合、競合が発生してプログラムの実行に影響を与える可能性があります。したがって、最良の結果を生み出すには、実際のアプリケーションで合理的な調整と使用を行う必要があります。

以上がJavaScript は画像の自動再生を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。