Home > Article > Web Front-end > Example of JavaScript implementation of mouse wheel control page image switching function

Example of JavaScript implementation of mouse wheel control page image switching function

韦小宝Original: 2018-01-12 09:55:021862browse

This article mainly introduces JavaScript to implement the mouse wheel control page image switching function, involving javascript event response and related implementation techniques for dynamic operation of page elements. Friends who are familiar with JavaScript can refer to it. Next article

The example of this article describes the JavaScript implementation of the mouse wheel control 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>
<html>
<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( ){}, you can also 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. And for loop just hides and displays pictures in order. I believe this is not difficult to understand.

Related recommendations:

Example of simple form validation function implemented by JS

Method of JS implementing click cycle switching to display content

js push box mini game implementation tutorial

The above is the detailed content of Example of JavaScript implementation of mouse wheel control page image switching function. 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：jQuery operation css style tutorialNext article：jQuery operation css style tutorial

See more

Example of JavaScript implementation of mouse wheel control page image switching function

Related articles