html怎么做到滚动鼠标转换,JavaScript实现鼠标滚轮控制页面图片切换

最常见就是图片的切换了，能通过滚动滚轮进行图片的浏览，省得用户还要去点下一张，做这种繁琐的步骤。来看个简单的例子吧。

-//W3C//DTDXHTML1.0Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

鼠标通过滚动滚轮切换图片

#picBox{

width:800px;height:600px;

margin:70pxauto;

}

varnowPic=1;

functionMouseWheel(e){

varpic;

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";

}elseif(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

鼠标通过滚动滚轮切换图片