How to use JavaScript to slide the image left and right and add a zoom effect?

JavaScript How to slide the image left and right and add a zoom effect?

With the development of the Internet, pictures have become an indispensable part of our daily lives. In web design, the way pictures are presented is also very important. This article will introduce how to use JavaScript to slide the image left and right and add a zoom effect.

1. HTML structure

First, we need to create an image container in HTML and nest the image element within it. For example:

<div class="slider">
  <img src="image1.jpg" alt="">
</div>

2. Add CSS styles

Next, we need to add some basic CSS styles to the image container to ensure that the image container can be displayed normally and have a certain size. For example:

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

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

3. To achieve the left and right sliding effect

First, we need to obtain the image container and image elements, and calculate the distance for each sliding. The code is as follows:

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

Then, we can bind a sliding event to the image container and adjust the position of the image display according to the direction of sliding. The code is as follows:

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. Add zoom effect

If we want to achieve the zoom effect while sliding the picture, we can get the sliding distance in the sliding event and adjust it according to the distance to resize the image. The code is as follows:

// 在 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 + ')';
}

Through the implementation of the above code, we can slide the image left and right on the web page and add a zoom effect. At the same time, during the implementation process, we can adjust the sliding distance, scaling ratio, etc. as needed to meet specific design needs.

The above is the detailed content of How to use JavaScript to slide the image left and right and add a zoom effect?. For more information, please follow other related articles on the PHP Chinese website!