switch (e.keyCode) { case 37: // 左箭头键 currentIndex = (currentIndex - 1 + imgs.length) % imgs.length; img.src = imgs[currentIndex].src; break; case 39: // 右箭头键 currentIndex = (currentIndex + 1) % imgs.length; img.src = imgs[currentIndex].src; break; }使用这个代码,图片只能切换一次
时间: 2024-04-17 17:27:00 浏览: 99
根据您提供的代码,图片只能切换一次的原因可能是`currentIndex`的值没有正确更新。在`switch`语句中,只有在按下左箭头键或右箭头键时才会更新`currentIndex`的值,这可能导致切换图片的逻辑只执行一次。
为了解决这个问题,可以尝试将更新`currentIndex`的逻辑移出`switch`语句,并确保在按下左箭头键或右箭头键后都会更新`currentIndex`的值。请参考以下修改后的代码:
```javascript
// 添加键盘事件
document.onkeydown = function (e) {
// 检查是否显示悬浮窗
if (isPopupVisible) {
// 获取所有具有相同类名的图片元素
var imgs = document.querySelectorAll('.preview-image');
var currentIndex = Array.from(imgs).indexOf(img); // 获取当前图片在数组中的索引
switch (e.keyCode) {
case 37: // 左箭头键
currentIndex = (currentIndex - 1 + imgs.length) % imgs.length;
break;
case 39: // 右箭头键
currentIndex = (currentIndex + 1) % imgs.length;
break;
}
// 更新图片源
img.src = imgs[currentIndex].src;
// 禁用页面滚动条
document.body.style.overflow = "hidden";
}
};
```
在上述代码中,我们将更新`currentIndex`的逻辑移出`switch`语句,并在按下左箭头键或右箭头键后更新`currentIndex`的值。这样可以确保每次按下键盘时图片都能正确地切换。
希望这次能解决您的问题!如果还有其他疑问,请随时提问。
阅读全文