看到一个js鼠标滚动图片切换的dome，在Firefox上正常，别的浏览器就跳着切换。-PHP中文网问答

如题，最近学习鼠标滚动事件，这是在网上看到的dome，想了很久都没想到那出问题了，特来请教。代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>鼠标通过滚动滚轮切换图片</title>  
<style>  
#picBox{  
    width:800px;height:600px;  
    margin:70px auto;  
    }  
</style>  
<script>  
    var nowPic=1;  
    function MouseWheel(e){  
        var pic;  
        e=e||window.event;  
        for(i=1;i<4;i++){  
            if(i==nowPic){  
                if(e.wheelDelta){//IE  
                    pic=document.getElementById("pic"+i);  
                    pic.style.display="block";  
                }
                else if(e.detail){//Firefox  
                    pic=document.getElementById("pic"+i);  
                    pic.style.display="block";  
                }  
                }else{  
                    pic=document.getElementById("pic"+i);  
                    pic.style.display="none";     
                }  
            }     
            if(nowPic>=3){  
                nowPic=1;  
            }else{  
                nowPic++;  
            }  
        }  
    /*Firefox注册事件*/  
    if(document.addEventListener){  
        document.addEventListener("DOMMouseScroll",MouseWheel,false);  
    }  
    window.onmousewheel=document.onmousewheel=MouseWheel;//IE/Opera/Chrome  
</script>  
</head>  
  
<body>  
    <h3>鼠标通过滚动滚轮切换图片</h3>  
    <div id="picBox">  
        <img src="http://picm.bbzhi.com/dongwubizhi/dongwuheji/dongwuheji_69803_m.jpg" width="800px" height="600px" id="pic1">  
        <span style="white-space:pre"></span>
        <img src="http://pic1a.nipic.com/2008-12-22/2008122204359187_2.jpg" width="800px" height="600px" id="pic2" style="display:none;">  
        <span style="white-space:pre"></span>
        <img src="http://imgphoto.gmw.cn/attachement/jpg/site2/20121221/002564a60ce4123e17614e.jpg" width="800px" height="600px" id="pic3" style="display:none;">  
    </div>  
</body>  
</html>

全部回复(1)

三叔2016-10-27 17:13:25 1楼

我自己把代码测了一下，通过 debug 发现，MouseWheel 函数执行了两次，然后再往下看，你的这段代码

window.onmousewheel=document.onmousewheel=MouseWheel;//IE/Opera/Chrome

既给 window 又给 document 的 onmousewheel 对象赋值，你这样子应该是为了实现兼容性吧，但是这么做会造成

当你每次滑动滚轮的时候，window 执行一次 MouseWheel 函数，document 又执行一次（我在 chrome 下测试时这样的），所以导致你的图片会跳播。

window.onmousewheel=MouseWheel;//IE/Opera/Chrome

把 document 的删掉，目前我自己测试，兼容 chrome 和 Firefox 和 IE 高版本，播放正常，但这个时候会出现一个 bug ，就是当你第一次滚动滑轮，会没有效果，原因是你的 nowPic 的初值是 1，设置成 2 就正常了。

var nowPic = 2;

至于其他兼容性就不知道了。OooO

赞 +0

添加回复