JavaScript를 사용하여 이미지를 왼쪽 및 오른쪽으로 슬라이드하고 확대/축소 효과를 추가하는 방법은 무엇입니까?

JavaScript 이미지를 왼쪽과 오른쪽으로 슬라이드하고 확대/축소 효과를 추가하는 방법은 무엇입니까?

인터넷의 발달로 사진은 우리 일상생활에서 없어서는 안 될 부분이 되었습니다. 웹 디자인에서는 사진이 표시되는 방식도 매우 중요합니다. 이 기사에서는 JavaScript를 사용하여 이미지를 좌우로 슬라이드하고 확대/축소 효과를 추가하는 방법을 소개합니다.

1. HTML 구조

먼저 HTML에서 이미지 컨테이너를 만들고 그 안에 이미지 요소를 중첩해야 합니다. 예:

<div class="slider">
  <img src="/static/imghwm/default1.png"  data-src="image1.jpg"  class="lazy" alt="">
</div>

2. CSS 스타일 추가

다음으로, 이미지 컨테이너가 정상적으로 표시되고 특정 크기를 갖도록 몇 가지 기본 CSS 스타일을 이미지 컨테이너에 추가해야 합니다. 예:

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3 왼쪽 및 오른쪽 슬라이딩 효과를 얻으려면

먼저 이미지 컨테이너와 이미지 요소를 가져와서 각 슬라이딩의 거리를 계산해야 합니다. 코드는 다음과 같습니다:

var slider = document.querySelector('.slider');
var image = document.querySelector('.slider img');
var slideDistance = 200; // 每次滑动的距离

그런 다음 슬라이딩 이벤트를 이미지 컨테이너에 바인딩하고 슬라이딩 방향에 따라 이미지 표시 위치를 조정할 수 있습니다. 코드는 다음과 같습니다:

slider.addEventListener('mousedown', startSlide);

function startSlide(e) {
  var startX = e.clientX;
  slider.addEventListener('mousemove', slideImage);

  function slideImage(e) {
    var moveX = e.clientX - startX;
    image.style.transform = 'translateX(' + moveX + 'px)';
  }

  slider.addEventListener('mouseup', stopSlide);
  slider.addEventListener('mouseleave', stopSlide);

  function stopSlide(e) {
    slider.removeEventListener('mousemove', slideImage);
    var moveX = e.clientX - startX;
    var absMoveX = Math.abs(moveX);
    var direction = moveX > 0 ? 'right' : 'left';

    if (absMoveX > slideDistance) {
      if (direction === 'right') {
        slideTo('prev');
      } else {
        slideTo('next');
      }
    } else {
      resetSlide();
    }
  }

  function resetSlide() {
    image.style.transform = 'translateX(0)';
  }

  function slideTo(direction) {
    var currentImageIndex = getIndex(image.getAttribute('src'));

    if (direction === 'prev') {
      currentImageIndex--;
    } else {
      currentImageIndex++;
    }

    if (currentImageIndex < 0) {
      currentImageIndex = imageList.length - 1;
    } else if (currentImageIndex >= imageList.length) {
      currentImageIndex = 0;
    }

    image.src = imageList[currentImageIndex];
    resetSlide();
  }
}

4. 확대/축소 효과 추가

그림을 슬라이딩하는 동안 확대/축소 효과를 얻으려면 슬라이딩 이벤트에서 슬라이딩 거리를 얻고 거리에 따라 그림의 크기를 조정할 수 있습니다. . 코드는 다음과 같습니다.

// 在 slideImage 函数中添加以下代码

function slideImage(e) {
  var moveX = e.clientX - startX;
  var scale = 1 - Math.abs(moveX) / (slider.offsetWidth / 2);

  if (scale < 0.3) {
    scale = 0.3;
  }

  image.style.transform = 'translateX(' + moveX + 'px) scale(' + scale + ')';
}

위 코드 구현을 통해 웹 페이지에서 이미지를 좌우로 슬라이드하고 확대/축소 효과를 추가할 수 있습니다. 동시에 구현 과정에서 특정 설계 요구 사항을 충족하기 위해 필요에 따라 슬라이딩 거리, 스케일링 비율 등을 조정할 수 있습니다.

위 내용은 JavaScript를 사용하여 이미지를 왼쪽 및 오른쪽으로 슬라이드하고 확대/축소 효과를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!