在你提供的代码中切换一次后就无法在循环切换图片了
时间: 2024-04-17 09:27:02 浏览: 144
非常抱歉之前的回答仍然有误。根据您的描述,问题在于在切换图片后无法继续循环切换。
为了解决这个问题,您可以尝试使用以下修改后的代码:
```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";
// 阻止事件冒泡,避免其他键盘事件触发
e.preventDefault();
e.stopPropagation();
}
};
```
在上述代码中,我们添加了 `e.preventDefault();` 和 `e.stopPropagation();`,这将阻止事件冒泡和默认行为,确保只有切换图片的功能被触发。
请注意,如果您还有其他键盘事件或操作需要执行,请根据您的需求进行相应的修改。
希望这次能够解决您的问题!如果还有其他疑问,请随时提问。
阅读全文