JavaScript에서 이미지를 컨테이너로 제한하면서 이미지의 원활한 왼쪽 및 오른쪽 슬라이딩 전환 효과를 얻는 방법은 무엇입니까?

JavaScript 이미지를 컨테이너로 제한하면서 이미지의 원활한 왼쪽 및 오른쪽 슬라이딩 전환 효과를 얻는 방법은 무엇입니까?

웹 개발 중에 이미지 캐러셀 효과를 구현해야 하는 상황에 자주 직면하게 됩니다. 이 기사에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!