手写 JavaScript 轮播代码：简单易懂的实现

CSS代码：

.slider { width: 500px; height: 300px; overflow: hidden; position: relative; } .slider img { width: 500px; height: 300px; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s; } .slider img.active { opacity: 1; } .prev, .next { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; border: none; font-size: 24px; cursor: pointer; } .prev { left: 20px; } .next { right: 20px; }

JavaScript代码：

const slider = document.querySelector('.slider'); const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); const slides = slider.querySelectorAll('img'); let currentIndex = 0;

function showSlide(index) { slides[currentIndex].classList.remove('active'); slides[index].classList.add('active'); currentIndex = index; }

function nextSlide() { let index = currentIndex + 1; if (index >= slides.length) { index = 0; } showSlide(index); }

function prevSlide() { let index = currentIndex - 1; if (index < 0) { index = slides.length - 1; } showSlide(index); }

nextBtn.addEventListener('click', nextSlide); prevBtn.addEventListener('click', prevSlide);

showSlide(0);

使用该代码可以实现一个简单的轮播效果，点击'prev'按钮可以向前切换图片，点击'next'按钮可以向后切换图片。