JSP图片轮播实例

// 模拟从数据库或其他数据源获取图片数据
ArrayList images = new ArrayList<>();
images.add("://picsum.photos/id/1018/800/400" images.add("://picsum.photos/id/1015/800/400" images.add("://picsum.photos/id/1019/800/400" images.add("://picsum.photos/id/1020/800/400" images.add("://picsum.photos/id/1021/800/400" String[] altTexts = {
"风景照片" "小径风景照片"
"日落风景照片" "天际线风景照片" "湖泊倒影风景照片" };
%>
"
![JSP图片轮播实例 第2张 JSP图片轮播实例 第2张]()
"="<%= altTexts[i] %>" class="e0a12b2825de6079 w-full h-auto"
<% } %>
let currentSlide = 0;
let slideInterval;
let intervalTime = 3000;
const slides = document.querySelectorAll('.carousel-slide');
const indicators = document.querySelectorAll('.carousel-indicator');
const totalSlides = slides.length;
function showSlide(index) {
// 确保索引在有效范围内
if (index >= totalSlides) {
currentSlide = 0;
} else if (index < 0) {
currentSlide = totalSlides - 1;
} else {
currentSlide = index;
}
// 更新幻灯片显示
slides.forEach((slide, i) => {
slide.classList.toggle('active', i === currentSlide);
});
// 更新指示器状态
indicators.forEach((indicator, i) => {
indicator.classList.toggle('active', i === currentSlide);
});
}
function changeSlide(direction) {
showSlide(currentSlide + direction);
}
function goToSlide(index) {
showSlide(index);
}
function startAutoPlay() {
slideInterval = setInterval(() => {
changeSlide(1);
}, intervalTime);
}
function stopAutoPlay() {
clearInterval(slideInterval);
}
function updateInterval() {
const newInterval = document.getElementById('intervalInput').value;
intervalTime = parseInt(newInterval);
stopAutoPlay();
startAutoPlay();
}
// 初始化自动播放
startAutoPlay();
// 为控制按钮添加事件监听
document.getElementById('playBtn').addEventListener('click', startAutoPlay);
document.getElementById('pauseBtn').addEventListener('click', stopAutoPlay);
// 添加键盘导航支持
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
changeSlide(-1);
} else if (e.key === 'ArrowRight') {
changeSlide(1);
}
});