JavaScript 实现图片上下滑动切换并添加缩放与淡入淡出动画的方法

在网页设计中，图片切换效果能为页面增添丰富的视觉体验。使用 JavaScript 可以轻松实现图片上下滑动切换，并结合缩放与淡入淡出动画，让页面更加生动和吸引人。

HTML 结构是基础。我们需要创建一个容器来放置图片，例如：

<div id="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

然后设置 CSS 样式，将图片的宽度和高度进行适当设置，并且把所有图片初始状态设为隐藏，只显示第一张图片。

#image-container img {
  width: 100%;
  height: auto;
  display: none;
}
#image-container img:first-child {
  display: block;
}

接下来就是关键的 JavaScript 部分。我们先获取所有图片元素和图片总数：

const images = document.querySelectorAll('#image-container img');
const totalImages = images.length;
let currentIndex = 0;

为了实现上下滑动切换效果，我们使用 animate 方法来创建动画。例如，让当前图片向上滑动并缩小淡出，下一张图片从底部向上滑动并放大淡入：

function changeImage() {
  const currentImage = images[currentIndex];
  const nextIndex = (currentIndex + 1) % totalImages;
  const nextImage = images[nextIndex];

  currentImage.animate([
    { transform: 'translateY(0) scale(1)', opacity: 1 },
    { transform: 'translateY(-100%) scale(0.5)', opacity: 0 }
  ], {
    duration: 1000,
    fill: 'forwards'
  });

  nextImage.style.display = 'block';
  nextImage.animate([
    { transform: 'translateY(100%) scale(0.5)', opacity: 0 },
    { transform: 'translateY(0) scale(1)', opacity: 1 }
  ], {
    duration: 1000,
    fill: 'forwards'
  });

  currentIndex = nextIndex;
}

最后，我们可以设置一个定时器来自动切换图片：

setInterval(changeImage, 3000);

通过以上步骤，我们成功使用 JavaScript 实现了图片上下滑动切换，并添加了缩放与淡入淡出动画。这种效果不仅能提升用户体验，还能使网站在视觉上更加突出。在实际应用中，还可以添加手动切换按钮等交互元素，进一步增强用户与页面的互动性。掌握这种方法，能为网页设计带来更多创意和可能性。