JavaScript 实现图片轮播效果

利用 JavaScript 实现图片轮播

介绍如何使用 JavaScript 实现图片轮播效果，支持横向自动切换和手动控制。

// 示例代码，具体实现根据实际需求调整

// 获取图片容器、图片列表和控制按钮等元素
const imageContainer = document.querySelector('.image-container');
const imageList = document.querySelectorAll('.image-container img');
const prevButton = document.querySelector('.prev-button');
const nextButton = document.querySelector('.next-button');

// 设置初始状态
let currentIndex = 0;
let intervalId;

// 自动切换图片
function autoPlay() {
  intervalId = setInterval(() => {
    // 切换到下一张图片
    currentIndex = (currentIndex + 1) % imageList.length;
    updateImage();
  }, 3000); // 设置切换间隔时间
}

// 手动切换图片
function handleButtonClick(offset) {
  // 停止自动播放
  clearInterval(intervalId);
  // 更新当前图片索引
  currentIndex = (currentIndex + offset + imageList.length) % imageList.length;
  // 更新图片显示
  updateImage();
  // 重新启动自动播放
  autoPlay();
}

// 更新图片显示
function updateImage() {
  // 设置图片容器的translateX值，实现图片滚动效果
  imageContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
}

// 添加事件监听器
prevButton.addEventListener('click', () => handleButtonClick(-1));
nextButton.addEventListener('click', () => handleButtonClick(1));

// 初始化自动播放
autoPlay();

代码说明:

• 以上代码仅为示例，实际应用中需根据具体需求进行调整。
• 可通过修改 setInterval 的时间参数来控制自动切换的速度。
• 可以根据需要添加更多功能，例如：图片切换动画效果、鼠标悬停暂停自动播放等。