文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

这篇文章主要介绍“JavaScript怎么实现鼠标滚轮控制页面图片切换”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript怎么实现鼠标滚轮控制页面图片切换”文章能帮助大家解决问题。

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

  <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

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

  <htmlxmlns="http://www.w3.org/1999/xhtml">

  <head>

  <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

  <title>鼠标通过滚动滚轮切换图片</title>

  <style>

  #picBox{

  width:800px;height:600px;

  margin:70pxauto;

  }

  </style>

  <script>

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

  }

  }

  

  if(document.addEventListener){

  document.addEventListener("DOMMouseScroll",MouseWheel,false);

  }

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

  </script>

  </head>

  <body>

  <h4align="center">鼠标通过滚动滚轮切换图片</h4>

  <pid="picBox">

  <imgsrc="/file/upload/202210/19/yaqtudbcdvq.jpg"width="800px"height="600px"id="pic1">

  <spanstyle="white-space:pre"></span><imgsrc="/file/upload/202210/19/ty13owkeva4.jpg"width="800px"height="600px"id="pic2"style="display:none;">

  <spanstyle="white-space:pre"></span><imgsrc="/file/upload/202210/19/ywsyol05zap.jpg"width="800px"height="600px"id="pic3"style="display:none;">

  </p>

  </body>

  </html>

  重点讲解下js代码,不同的浏览器鼠标滚轮事件也不一样,说白点就是兼容性问题,主要是有两种,onmousewheel(IE/Opera/Safari/Chrome)和DOMMouseScroll(Firefox),如果想兼容firefox,应采用addEventListener监听,这个函数有3个参数,addEventListener(type,listener,useCapture),type就是click,focus......类型,而listener可以直接写方法function(){},也可以调用写好的方法体,如我的例子。useCapture是一个布尔值,只有true和false,表示该事件的响应顺序,选false则采用bubbing(冒泡)方式,选项true采用Capture方式。对于addEventListener以后会出一个详解。

  在MouseWheel方法中e.wheelDelta兼容IE等其它浏览器,每当滚动一次滚轮会返回+3/-3(上滚/下滚),而e.detail兼容Firefox浏览器,每当滚动一次滚轮会返回+120/-120(上滚/下滚),通过这些返回的值可以做出是向上还是向下滚动的判断。而for循环只是让图片有顺序的隐藏和显示,相信这个不难看懂。

关于“JavaScript怎么实现鼠标滚轮控制页面图片切换”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯