js实现简单轮播
使用纯JavaScript实现简单轮播
轮播图是网页中常见的交互组件，以下是一种基础实现方式：
HTML结构
<div class="slider">
<div class="slides">
<img src="image1.jpg" class="slide active">
<img src="image2.jpg" class="slide">
<img src="image3.jpg" class="slide">
</div>
<button class="prev">←</button>
<button class="next">→</button>
</div>CSS样式
.slider {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
.slides {
display: flex;
transition: transform 0.5s ease;
}
.slide {
min-width: 100%;
height: 400px;
object-fit: cover;
}
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
.prev { left: 10px; }
.next { right: 10px; }JavaScript实现
const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const slidesContainer = document.querySelector('.slides');
let currentIndex = 0;
function updateSlider() {
slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
slides.forEach((slide, index) => {
slide.classList.toggle('active', index === currentIndex);
});
}
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % slides.length;
updateSlider();
});
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
updateSlider();
});
// 自动轮播
let interval = setInterval(() => {
currentIndex = (currentIndex + 1) % slides.length;
updateSlider();
}, 3000);
// 鼠标悬停暂停
document.querySelector('.slider').addEventListener('mouseenter', () => {
clearInterval(interval);
});
document.querySelector('.slider').addEventListener('mouseleave', () => {
interval = setInterval(() => {
currentIndex = (currentIndex + 1) % slides.length;
updateSlider();
}, 3000);
});实现要点说明
核心逻辑
通过修改translateX属性移动幻灯片容器，利用CSS过渡效果实现平滑动画。当前显示索引存储在currentIndex变量中。
边界处理
使用模运算(%)确保索引在有效范围内循环，当到达最后一张时返回第一张，到达第一张时跳到最后一张。
交互增强
添加自动轮播功能，通过setInterval定时切换。当用户鼠标悬停时暂停轮播，离开后恢复。
扩展建议
- 添加指示器小圆点
- 支持触摸滑动（移动端）
- 添加淡入淡出过渡效果
- 实现无限循环（克隆首尾元素）
这种实现方式不依赖任何第三方库，适合学习轮播图的基本原理。对于生产环境，可以考虑使用成熟的轮播库如Swiper.js以获得更丰富的功能和更好的兼容性。
