65 lines
1.8 KiB
JavaScript
65 lines
1.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
||
// 获取轮播图相关元素
|
||
const container = document.querySelector('.swipper-container');
|
||
const slides = document.querySelectorAll('.swipper-slide');
|
||
const prevBtn = document.querySelector('.prev');
|
||
const nextBtn = document.querySelector('.next');
|
||
const points = document.querySelectorAll('.point');
|
||
|
||
let currentIndex = 0;
|
||
const slideCount = slides.length;
|
||
|
||
// 更新轮播图显示
|
||
function updateSlide() {
|
||
// 移动容器到当前索引位置
|
||
container.style.transform = `translateX(-${currentIndex * 25}%)`;
|
||
|
||
// 更新指示点状态
|
||
points.forEach((point, index) => {
|
||
if(index === currentIndex) {
|
||
point.style.backgroundColor = '#fff';
|
||
} else {
|
||
point.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
|
||
}
|
||
});
|
||
}
|
||
|
||
// 下一张
|
||
function nextSlide() {
|
||
currentIndex = (currentIndex + 1) % slideCount;
|
||
updateSlide();
|
||
}
|
||
|
||
// 上一张
|
||
function prevSlide() {
|
||
currentIndex = (currentIndex - 1 + slideCount) % slideCount;
|
||
updateSlide();
|
||
}
|
||
|
||
// 绑定按钮事<E992AE><E4BA8B>
|
||
nextBtn.addEventListener('click', nextSlide);
|
||
prevBtn.addEventListener('click', prevSlide);
|
||
|
||
// 绑定指示点点击事件
|
||
points.forEach((point, index) => {
|
||
point.addEventListener('click', () => {
|
||
currentIndex = index;
|
||
updateSlide();
|
||
});
|
||
});
|
||
|
||
// 自动播放
|
||
let autoPlayTimer = setInterval(nextSlide, 3000);
|
||
|
||
// 鼠标悬停时暂停自动播放
|
||
const swipper = document.querySelector('#swipper');
|
||
swipper.addEventListener('mouseenter', () => {
|
||
clearInterval(autoPlayTimer);
|
||
});
|
||
|
||
// 鼠标离开时恢复自动播放
|
||
swipper.addEventListener('mouseleave', () => {
|
||
autoPlayTimer = setInterval(nextSlide, 3000);
|
||
});
|
||
});
|