js实现上一张下一张
实现图片切换功能
通过JavaScript实现上一张和下一张图片切换功能，可以使用事件监听和数组索引控制。以下是具体实现方法：
HTML结构示例
<div class="image-container">
<img id="current-image" src="image1.jpg">
<button id="prev-btn">上一张</button>
<button id="next-btn">下一张</button>
</div>JavaScript实现
// 图片数组
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let currentIndex = 0;
// 获取DOM元素
const currentImage = document.getElementById('current-image');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
// 更新图片显示
function updateImage() {
currentImage.src = images[currentIndex];
}
// 上一张按钮事件
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateImage();
});
// 下一张按钮事件
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % images.length;
updateImage();
});
// 初始化显示
updateImage();添加过渡动画效果
为图片切换添加平滑的过渡效果，可以结合CSS实现：
CSS样式
.image-container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
#current-image {
position: absolute;
width: 100%;
height: 100%;
transition: opacity 0.5s ease;
}
.fade-out {
opacity: 0;
}修改JavaScript
function updateImage() {
currentImage.classList.add('fade-out');
setTimeout(() => {
currentImage.src = images[currentIndex];
currentImage.classList.remove('fade-out');
}, 500);
}支持键盘操作
添加键盘左右箭头控制功能：
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateImage();
} else if (e.key === 'ArrowRight') {
currentIndex = (currentIndex + 1) % images.length;
updateImage();
}
});无限循环处理
使用模数运算实现无限循环：
- 当到达最后一张时，点击下一张会回到第一张
- 当在第一张时，点击上一张会跳到最后一张
这种方法已经在示例代码中通过%运算符实现。
动态加载图片
如果图片需要从服务器动态加载：
async function loadImages() {
try {
const response = await fetch('/api/images');
images = await response.json();
updateImage();
} catch (error) {
console.error('加载图片失败:', error);
}
}
// 初始化时调用
loadImages();
