// 添加键盘事件 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; img.src = imgs[currentIndex].src; break; case 39: // 右箭头键 currentIndex = (currentIndex + 1) % imgs.length; img.src = imgs[currentIndex].src; break; } } };我修改后他无法来回切换图片,并且我需要在我切换图片时,页面的滚动条无动作
时间: 2024-04-17 10:26:57 浏览: 128
CheckBoxListview.rar_ListView/ListBox_Delphi_
如果您想在切换图片时禁用页面滚动条,可以使用`document.body.style.overflow`属性来控制滚动条的显示与隐藏。以下是修改后的代码示例:
```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;
img.src = imgs[currentIndex].src;
break;
case 39: // 右箭头键
currentIndex = (currentIndex + 1) % imgs.length;
img.src = imgs[currentIndex].src;
break;
}
// 禁用页面滚动条
document.body.style.overflow = "hidden";
}
};
// 关闭悬浮窗时恢复页面滚动条
overlay.onclick = function () {
document.body.removeChild(popup);
document.body.removeChild(overlay);
isPopupVisible = false; // 设置悬浮窗显示状态为false
// 恢复页面滚动条
document.body.style.overflow = "auto";
};
```
在上述代码中,当切换图片时,使用`document.body.style.overflow = "hidden"`来禁用页面滚动条。而在关闭悬浮窗时,使用`document.body.style.overflow = "auto"`来恢复页面滚动条。
希望这次能解决您的问题!如果还有其他疑问,请随时提问。
阅读全文