JS实现的多张图片轮流播放幻灯片效果

2023年5月28日上午10:54 • JavaScript

下面是 JS 实现多张图片轮流播放幻灯片效果的完整攻略：

确定需求

在实现多张图片轮流播放幻灯片效果前，我们需要明确一些需求：

显示多张图片：需要将多张图片放在同一个容器中，用于轮流播放；
轮流播放图片：需要编写 JS 代码实现轮流播放多张图片的逻辑；
显示切换控制按钮：为了方便用户手动控制图片切换，可以添加切换控制按钮；
自动轮播：为了提升用户体验，可以设置自动轮播的功能。

实现步骤

1. HTML 结构

首先，我们需要将需要轮播的图片放在同一容器内，并添加相应的 HTML 结构，如下所示：

<div class="slideshow">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

2. 样式设置

为了让轮播图片显示良好，可以添加样式设置：

.slideshow {
  position: relative;
  max-width: 600px; /* 设置轮播容器的最大宽度 */
  margin: 0 auto; /* 居中显示轮播容器 */
}
.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; /* 将所有图片透明度设置为0 */
  transition: opacity .5s ease-in-out; /* 图片渐变动画效果 */
}
.slideshow img.active {
  opacity: 1; /* 显示当前轮播图片 */
}

3. JS 逻辑编写

3.1 显示第一张图片

页面加载完成后，我们需要将第一张图片设置为显示状态，可以在 JS 代码中添加以下逻辑：

// 获取所有图片元素
const imgs = document.querySelectorAll('.slideshow img');

// 设置第一张图片为显示状态
imgs[0].classList.add('active');

3.2 自动轮播

为了实现自动轮播功能，可以设置一个定时器，定时切换轮播图片的状态。

let slideIndex = 0; // 定义一个变量，用于记录当前显示的图片序号

function showNext() {
  // 隐藏当前图片
  imgs[slideIndex].classList.remove('active');

  // 判断下一张要显示的图片序号
  slideIndex = (slideIndex + 1) % imgs.length;

  // 显示下一张图片
  imgs[slideIndex].classList.add('active');
}

// 设置定时器，每3秒切换一张轮播图片
setInterval(showNext, 3000);

3.3 手动切换

为了方便用户手动切换轮播图片，我们可以添加相应的切换控制按钮，并添加相应的点击事件处理逻辑。

HTML 结构：

<div class="slideshow">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <div class="slideshow-controls">
    <button class="prev">上一张</button>
    <button class="next">下一张</button>
  </div>
</div>

JS 代码：

// 获取上一张和下一张按钮元素
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

// 上一张按钮点击事件处理
prevBtn.addEventListener('click', function() {
  // 隐藏当前图片
  imgs[slideIndex].classList.remove('active');

  // 判断下一张要显示的图片序号
  slideIndex = (slideIndex - 1 + imgs.length) % imgs.length;

  // 显示下一张图片
  imgs[slideIndex].classList.add('active');
});

// 下一张按钮点击事件处理
nextBtn.addEventListener('click', function() {
  // 隐藏当前图片
  imgs[slideIndex].classList.remove('active');

  // 判断下一张要显示的图片序号
  slideIndex = (slideIndex + 1) % imgs.length;

  // 显示下一张图片
  imgs[slideIndex].classList.add('active');
});

示例说明

这里提供两个示例，分别使用不同的 JS 库实现多张图片轮流播放幻灯片效果。

示例一：使用 jQuery 编写

HTML 结构和样式设置同上，JS 代码如下：

$(function() {
  let slideIndex = 0; // 定义一个变量，用于记录当前显示的图片序号

  function showNext() {
    // 隐藏当前图片
    $('.slideshow img').eq(slideIndex).removeClass('active');

    // 判断下一张要显示的图片序号
    slideIndex = (slideIndex + 1) % $('.slideshow img').length;

    // 显示下一张图片
    $('.slideshow img').eq(slideIndex).addClass('active');
  }

  // 设置定时器，每3秒切换一张轮播图片
  setInterval(showNext, 3000);

  // 上一张按钮点击事件处理
  $('.prev').click(function() {
    // 隐藏当前图片
    $('.slideshow img').eq(slideIndex).removeClass('active');

    // 判断下一张要显示的图片序号
    slideIndex = (slideIndex - 1 + $('.slideshow img').length) % $('.slideshow img').length;

    // 显示下一张图片
    $('.slideshow img').eq(slideIndex).addClass('active');
  });

  // 下一张按钮点击事件处理
  $('.next').click(function() {
    // 隐藏当前图片
    $('.slideshow img').eq(slideIndex).removeClass('active');

    // 判断下一张要显示的图片序号
    slideIndex = (slideIndex + 1) % $('.slideshow img').length;

    // 显示下一张图片
    $('.slideshow img').eq(slideIndex).addClass('active');
  });
});

示例二：使用 Swiper.js 编写

HTML 结构和样式设置同上，JS 代码如下：

let mySwiper = new Swiper('.swiper-container', {
  speed: 800, // 轮播切换速度
  autoplay: {
    delay: 3000, // 轮播间隔时间
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});