JavaScript 轮播图代码：实现自动播放和手动切换

❮ ❯

.slider { position: relative; max-width: 1000px; margin: 0 auto; overflow: hidden; }

.slides { display: flex; width: 100%; transition: transform 0.5s ease; }

.slides img { width: 100%; height: auto; }

.controls { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; }

.arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 30px; cursor: pointer; user-select: none; }

.prev { left: 0; }

.next { right: 0; }

const slides = document.querySelector('.slides'); const slideImages = document.querySelectorAll('.slides img');

// 设置幻灯片索引和时间间隔 let slideIndex = 0; const intervalTime = 5000;

// 自动幻灯片函数 const autoSlide = () => { // 如果幻灯片索引超出范围，重置索引 if (slideIndex >= slideImages.length - 1) { slideIndex = 0; } else { slideIndex++; }

// 切换到下一张图片 slides.style.transform = translateX(-${slideIndex * 100}%); };

// 设置幻灯片间隔 let slideInterval = setInterval(autoSlide, intervalTime);

// 手动幻灯片函数 const manualSlide = (direction) => { // 清除间隔以防止自动幻灯片 clearInterval(slideInterval);

// 重置幻灯片间隔 slideInterval = setInterval(autoSlide, intervalTime);

// 切换到下一张或上一张图片 if (direction === 'prev') { if (slideIndex <= 0) { slideIndex = slideImages.length - 1; } else { slideIndex--; } } else { if (slideIndex >= slideImages.length - 1) { slideIndex = 0; } else { slideIndex++; } }

slides.style.transform = translateX(-${slideIndex * 100}%); };

// 设置箭头按钮的事件监听器 const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next');

prevBtn.addEventListener('click', () => manualSlide('prev')); nextBtn.addEventListener('click', () => manualSlide('next'));