画像をコンテナに限定しながら、JavaScriptで画像のシームレスな左右のスライド切り替え効果を実現するにはどうすればよいですか?

JavaScript 画像をコンテナに限定しながら、画像のシームレスな左右のスライド切り替え効果を実現するにはどうすればよいでしょうか?

Web 開発では、画像カルーセル効果を実現する必要がある状況によく遭遇します。この記事では、JavaScript を使用して画像の左右のシームレスなスライド切り替え効果を実現し、指定したコンテナに画像を制限する方法を紹介します。

まず、画像を表示するためのコンテナを HTML で作成する必要があります。このコンテナは div 要素にすることができ、幅と高さを固定にし、オーバーフローを非表示に設定して表示範囲を制限します。コードは次のとおりです。

<div id="container">
  <ul id="imageList">
    <li><img  src="/static/imghwm/default1.png"  data-src="image1.jpg"  class="lazy"/ alt="画像をコンテナに限定しながら、JavaScriptで画像のシームレスな左右のスライド切り替え効果を実現するにはどうすればよいですか?" ></li>
    <li><img  src="/static/imghwm/default1.png"  data-src="image2.jpg"  class="lazy"/ alt="画像をコンテナに限定しながら、JavaScriptで画像のシームレスな左右のスライド切り替え効果を実現するにはどうすればよいですか?" ></li>
    <li><img  src="/static/imghwm/default1.png"  data-src="image3.jpg"  class="lazy"/ alt="画像をコンテナに限定しながら、JavaScriptで画像のシームレスな左右のスライド切り替え効果を実現するにはどうすればよいですか?" ></li>
    ...
  </ul>
</div>

次に、JavaScript を使用して、シームレスなスライド切り替えの効果を実現する必要があります。具体的な手順は次のとおりです。

1. 関連要素の参照を取得します:

var container = document.getElementById('container');
var imageList = document.getElementById('imageList');
var images = imageList.getElementsByTagName('img');
var currentIndex = 0; // 当前显示的图片索引

2. 初期スタイルを設定します:

// 设置imageList的宽度，保证所有图片水平排列
imageList.style.width = images.length * 100 + '%';

// 设置每张图片的宽度
for (var i = 0; i < images.length; i++) {
  images[i].style.width = 100 / images.length + '%';
}

3. 実装 シームレスなスライド切り替え効果:

function slideTo(index) {
  // 计算需要滑动的距离
  var distance = -index * container.offsetWidth;

  // 设置imageList的动画效果
  imageList.style.transition = 'transform 0.5s ease';
  imageList.style.transform = 'translate(' + distance + 'px, 0)';
}

function reset() {
  // 当滑动到最后一张图时，切换到第一张图
  if (currentIndex === images.length) {
    currentIndex = 0;
  }

  // 当滑动到第一张图之前时，切换到最后一张图
  if (currentIndex < 0) {
    currentIndex = images.length - 1;
  }

  // 移除过渡效果，快速切换到目标位置
  imageList.style.transition = 'none';
  imageList.style.transform = 'translate(' + (-currentIndex * container.offsetWidth) + 'px, 0)';
}

function slideNext() {
  currentIndex++;
  slideTo(currentIndex);
}

function slidePrev() {
  currentIndex--;
  slideTo(currentIndex);
}

// 监听容器的滑动事件
container.addEventListener('touchstart', function (event) {
  var startTouchPos = event.touches[0].clientX;
  var lastTouchPos = startTouchPos;

  // 监听容器的滑动过程
  container.addEventListener('touchmove', function (event) {
    var currentTouchPos = event.touches[0].clientX;
    var diff = currentTouchPos - lastTouchPos;

    // 判断滑动方向
    if (diff > 0) {
      slideNext();
    } else {
      slidePrev();
    }

    lastTouchPos = currentTouchPos;
  });

  // 监听容器的滑动结束事件
  container.addEventListener('touchend', function (event) {
    reset();
    container.removeEventListener('touchmove', onTouchMove);
    container.removeEventListener('touchend', onTouchEnd);
  });
});

上記のコードにより、画像のシームレスなスライド切り替え効果を実現し、指定されたコンテナに制限します。コンテナ内の絵をタッチしてスライドすると、スライド方向に応じて対応する絵に切り替わります。最後の画像に切り替えた場合、再度切り替えると最初の画像にジャンプし、その逆も同様です。

この記事が、JavaScript を使用して画像の左右のシームレスなスライド切り替え効果を実現する方法を理解するのに役立つことを願っています。

以上が画像をコンテナに限定しながら、JavaScriptで画像のシームレスな左右のスライド切り替え効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。