JavaScript 如何实现图片的轮播切换效果并加入淡入淡出动画？

WBOY 原创: 2023-10-18 12:12:35 823浏览

图片轮播是网页设计中常见的效果之一，通过切换图片来展示不同的内容，给用户带来更好的视觉体验。在这篇文章中，我将介绍如何使用 JavaScript 来实现图片的轮播切换效果，并加入淡入淡出的动画效果。下面是具体的代码示例。

首先，我们需要在 HTML 页面中创建一个包含轮播图的容器，并在其中添加若干张图片，如下所示：

<div class="slideshow-container">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
</div>

接下来，我们可以使用 CSS 对轮播图进行基本的样式设置，包括容器的大小、图片的位置等，代码如下：

.slideshow-container {
  width: 800px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.slideshow-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

在 JavaScript 中，我们可以使用 setInterval() 函数来定时切换图片。首先，我们需要获取轮播图容器以及其中的所有图片元素，代码如下：

var container = document.querySelector('.slideshow-container');
var slides = container.querySelectorAll('img');

接下来，我们可以定义一个变量来记录当前显示的图片索引，以及一个函数来切换图片。切换图片时，将当前显示的图片透明度设置为 0，下一张要显示的图片透明度设置为 1，实现淡入淡出的效果。代码如下：

var currentIndex = 0;

function changeSlide() {
  slides[currentIndex].style.opacity = 0;
  
  currentIndex = (currentIndex + 1) % slides.length;
  
  slides[currentIndex].style.opacity = 1;
}

最后，我们可以使用 setInterval() 函数来定时调用切换图片的函数，实现自动轮播的效果。代码如下：