Home > Article > Web Front-end > Sample code for JavaScript to implement mouse wheel control of page image switching

Sample code for JavaScript to implement mouse wheel control of page image switching

黄舟Original: 2017-10-16 11:10:511587browse

This article mainly introduces the JavaScript implementation of the mouse wheel control page image switching function, involving JavaScript event response and dynamic operation of page elements related implementation techniques. Friends in need can refer to the following

The example of this article describes the JavaScript implementation The mouse wheel controls the page image switching function. Share it with everyone for your reference. The details are as follows:

The scroll wheel on the mouse is a good thing. Why do I say this? Because it can help us browse the web quickly and read long articles quickly. For us on the web front-end, how can we not pay attention to this mouse wheel? So how can it allow users to browse the web better?

The most common thing is to switch pictures. You can browse pictures by scrolling the wheel, saving the user the need to click on the next picture and do such tedious steps. Let’s look at a simple example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 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 align="center">鼠标通过滚动滚轮切换图片</h3>
  <p 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;">
  </p>
</body>
</html>

Focus on the js code. Different browsers have different mouse wheel events. To put it bluntly, it is a compatibility issue. There are mainly two types, onmousewheel (IE/Opera/Safari/Chrome) and DOMMouseScroll(Firefox), if you want to be compatible with firefox, you should use addEventListener to listen. This function has 3 parameters, addEventListener(type,listener,useCapture), type is click, focus... type, and listener can directly write the method function(){}, or call the written method body, as in my example . useCapture is a Boolean value, with only true and false, indicating the response sequence of the event. If false is selected, the bubbling method is used, and if true is selected, the Capture method is used. There will be a detailed explanation of addEventListener later.

In the MouseWheel method, e.wheelDelta is compatible with other browsers such as IE. Each time the wheel is scrolled, it will return +3/-3 (scroll up/down), while e.detail is compatible with Firefox browser. When the scroll wheel is scrolled once, it will return +120/-120 (scroll up/scroll down). These returned values can be used to determine whether to scroll up or down. The for loop only hides and displays pictures in order. I believe this is not difficult to understand.

The above is the detailed content of Sample code for JavaScript to implement mouse wheel control of page image switching. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript object-oriented basics and specific analysis of this pointing problemNext article：JavaScript object-oriented basics and specific analysis of this pointing problem

See more

Sample code for JavaScript to implement mouse wheel control of page image switching

Related articles