JavaScript を使用して画像の上下スライド切り替え効果を実現し、フェードインおよびフェードアウト アニメーションを追加するにはどうすればよいですか?

JavaScript を使用して画像の上下スライド切り替え効果を実現し、フェードインおよびフェードアウト アニメーションを追加するにはどうすればよいですか?

Web 開発では、多くの場合、画像の切り替え効果を実現する必要があります。JavaScript を使用すると、上下のスライド切り替えを実現したり、フェードインおよびフェードアウトのアニメーション効果を追加したりできます。詳しく見てみましょう。

まず、複数の画像を含むコンテナが必要です。HTML の div タグを使用して画像をホストできます。たとえば、画像を保持するために、ID「image-container」を持つ div を作成します。

<div id="image-container">
   <img src="image1.jpg">
   <img src="image2.jpg">
   <img src="image3.jpg">
</div>

次に、切り替え効果を実現するための JavaScript コードを記述する必要があります。ここでは、イベント リスナーを使用してマウス スクロール イベントを監視し、スクロール方向に基づいて画像を切り替えます。

var container = document.getElementById("image-container");
var images = container.getElementsByTagName("img");
var currentIndex = 0;
var imageHeight = images[currentIndex].height;

window.addEventListener("wheel", function(event){
   var deltaY = event.deltaY;
   
   // 滚轮向下滚动，切换至下一张图片
   if (deltaY > 0 && currentIndex < images.length - 1) {
      currentIndex++;
   }
   
   // 滚轮向上滚动，切换至上一张图片
   else if (deltaY < 0 && currentIndex > 0) {
      currentIndex--;
   }
   
   // 计算图片容器需要滚动的距离
   var scrollDistance = currentIndex * imageHeight;
   
   // 使用CSS的tranform属性实现滑动效果
   container.style.transform = "translateY(-" + scrollDistance + "px)";
   
   // 使用CSS的transition属性实现淡入淡出效果
   container.style.opacity = 0.5;
});

上記のコードでは、deltaY はスクロール ホイールの距離を表し、currentIndex は現在表示されている画像インデックスを表し、imageHeight はスクロール ホイールの距離を表します。各画像の高さ。ホイールイベントをリッスンすることにより、ホイールの回転方向と現在表示されている画像インデックスに応じて切り替え効果が実現されます。次に、CSS 変換属性を使用して画像コンテナを対応する位置まで上下にスライドさせ、トランジション属性を使用して透明度を設定し、フェードインおよびフェードアウトのアニメーション効果を実現します。

実際の使用では、必要に応じて関連するスタイルを調整および最適化できます。

上記は、JavaScript を使用して画像の上下スライド切り替え効果を実現し、フェードインおよびフェードアウト アニメーションを追加するコード例です。マウススクロールイベントをリッスンすることで、ホイールのスクロール方向に応じて画像を切り替え、CSSのtransformプロパティを使用してスライド効果を実現し、transitionプロパティを使用してフェードインおよびフェードアウト効果を実現できます。これにより、画像の切り替えがよりスムーズかつ鮮明になります。

以上がJavaScript を使用して画像の上下スライド切り替え効果を実現し、フェードインおよびフェードアウト アニメーションを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。