How to use JavaScript to slide the image left and right and add a zoom effect?-JS Tutorial-php.cn

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

WBOY

Release： 2023-10-18 11:15:59

Original

1285 people have browsed it

JavaScript 如何实现图片的左右滑动并加入缩放效果？

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>

Copy after login

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;
}

Copy after login

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; // 每次滑动的距离

Copy after login

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();
  }
}

Copy after login

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

Copy after login

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!