JavaScript で画像カルーセル切り替え効果を実装し、フェードインおよびフェードアウトアニメーションを追加するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript で画像カルーセル切り替え効果を実装し、フェードインおよびフェードアウトアニメーションを追加するにはどうすればよいですか?

WBOY

リリース： 2023-10-18 12:12:35

オリジナル

1383 人が閲覧しました

JavaScript 如何实现图片的轮播切换效果并加入淡入淡出动画？

JavaScript 画像のカルーセル切り替え効果を実装し、フェードインおよびフェードアウトアニメーションを追加するにはどうすればよいですか?

画像カルーセルは、Web デザインでよく使われる効果の 1 つで、画像を切り替えて異なるコンテンツを表示することで、ユーザーに優れた視覚体験を提供します。この記事では、JavaScriptを使用して画像のカルーセル切り替え効果を実装したり、フェードイン・フェードアウトのアニメーション効果を追加したりする方法を紹介します。以下に具体的なコード例を示します。

まず、以下に示すように、HTML ページにカルーセル画像を含むコンテナを作成し、それにいくつかの画像を追加する必要があります。

<div class="slideshow-container">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
</div>

ログイン後にコピー

次に、CSS を使用して基本スタイル設定を行うことができます。コンテナのサイズ、画像の位置など、カルーセル画像に必要な情報。コードは次のとおりです。

.slideshow-container {
  width: 800px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.slideshow-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

ログイン後にコピー

JavaScript では、setInterval() 関数を使用して画像を定期的に切り替えることができます。まず、カルーセルコンテナーとその中のすべての画像要素を取得する必要があります。コードは次のとおりです:

var container = document.querySelector('.slideshow-container');
var slides = container.querySelectorAll('img');

ログイン後にコピー

次に、現在表示されている画像インデックスを記録する変数と、切り替える関数を定義します。画像。画像を切り替える場合、現在表示している画像の透明度を 0、次に表示する画像の透明度を 1 に設定すると、フェードインおよびフェードアウト効果が得られます。コードは次のとおりです。

var currentIndex = 0;

function changeSlide() {
  slides[currentIndex].style.opacity = 0;
  
  currentIndex = (currentIndex + 1) % slides.length;
  
  slides[currentIndex].style.opacity = 1;
}

ログイン後にコピー

最後に、setInterval() 関数を使用して、画像を切り替える関数を定期的に呼び出し、自動カルーセルの効果を実現します。コードは次のとおりです。