JavaScript怎么实现鼠标滚轮控制页面图片切换

云天博客 • 09/23 16:32 • 程序猿 • 阅读 19

这篇文章主要介绍“JavaScript怎么实现鼠标免费云主机域名滚轮控制页面图片切换”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“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

　　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
　　
　　
　　
　　鼠标通过滚动滚轮切换图片　　　　
　　
　　
　　
　　
　　

相关推荐: IndexedDB前端客户端数据库如何使用

这篇文章主要讲解了“IndexedDB前端客户端数据库如何使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“IndexedDB前端客户端数据库如何使用”吧！IndexedDB介绍IndexedDB是一种能在浏览…

免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。