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

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

随着互联网的发展，图片已经成为我们日常生活中不可或缺的一部分。而在网页设计中，图片的呈现方式也是非常重要的。本文将介绍如何使用JavaScript来实现图片的左右滑动并加入缩放效果。

一、HTML 结构

首先，我们需要在 HTML 中创建一个图片容器，并在其中嵌套图片元素。例如：

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

二、添加 CSS 样式

接下来，我们需要为图片容器添加一些基本的 CSS 样式，以确保图片容器可以正常显示并具有一定的尺寸。例如：

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

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

三、实现左右滑动效果

首先，我们需要获取到图片容器和图片元素，并计算出每次滑动时的距离。代码如下：

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

四、添加缩放效果

如果我们希望在滑动图片的同时能够实现缩放效果，我们可以在滑动事件中获取滑动的距离，并根据距离的大小来调整图片的尺寸。代码如下：

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

通过以上代码的实现，我们就可以在网页中实现图片的左右滑动并加上缩放效果了。同时，在实现过程中，我们可以根据需要对滑动的距离、缩放的比例等进行调整，以满足具体的设计需求。