js实现图片轮播
实现图片轮播的基本思路
图片轮播的核心是通过定时切换显示的图片，结合CSS动画或JavaScript动态操作DOM元素实现平滑过渡效果。以下是两种常见实现方式：
纯JavaScript实现轮播
// 获取DOM元素
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
let currentSlide = 0;
const maxSlide = slides.length - 1;
// 初始化轮播
const goToSlide = (slide) => {
slides.forEach((s, i) => {
s.style.transform = `translateX(${100 * (i - slide)}%)`;
});
};
// 下一张
const nextSlide = () => {
currentSlide = currentSlide === maxSlide ? 0 : currentSlide + 1;
goToSlide(currentSlide);
};
// 上一张
const prevSlide = () => {
currentSlide = currentSlide === 0 ? maxSlide : currentSlide - 1;
goToSlide(currentSlide);
};
// 自动播放
let timer = setInterval(nextSlide, 3000);
// 鼠标悬停暂停
slider.addEventListener('mouseenter', () => clearInterval(timer));
slider.addEventListener('mouseleave', () => timer = setInterval(nextSlide, 3000));
// 按钮事件
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
// 初始化
goToSlide(0);CSS样式配合
.slider {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.5s ease;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.5);
border: none;
padding: 10px;
cursor: pointer;
}
.prev { left: 20px; }
.next { right: 20px; }使用Swiper.js库实现
对于更复杂的需求，可以使用专业轮播库Swiper.js：
// 安装：npm install swiper
import Swiper from 'swiper';
import 'swiper/css';
const swiper = new Swiper('.swiper', {
loop: true,
autoplay: {
delay: 3000,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});HTML结构示例
<div class="slider">
<div class="slide"><img src="image1.jpg"></div>
<div class="slide"><img src="image2.jpg"></div>
<div class="slide"><img src="image3.jpg"></div>
<button class="btn prev">←</button>
<button class="btn next">→</button>
</div>关键注意事项
- 图片预加载可以避免切换时的空白闪烁
- 移动端需要添加触摸事件支持
- 响应式设计需要根据窗口大小调整图片尺寸
- 无限循环时注意DOM节点的合理复用
通过调整transition时间和interval时间可以获得不同的轮播效果，淡入淡出效果可以通过opacity属性实现。
