How to realize the picture switch of the mouse wheel control page by JavaScript
This article mainly introduces the "JavaScript how to achieve mouse wheel control page picture switch" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, hope that this "JavaScript how to achieve mouse wheel control page picture switch" article can help you solve the problem.
The most common is the switching of the picture, which can browse the picture by scrolling the wheel, so that the user does not have to click on the next one to do this tedious step. Let's look at a simple example.
The mouse switches pictures by scrolling the wheel.
# picBox {
Width:800px;height:600px
Margin:70pxauto
}
VarnowPic=1
FunctionMouseWheel (e) {
Varpic
EBay | | window.event
For (iTunes 1 / 2 / 1 / 3) {
NowPic=1
} else {
NowPic++
}
}
/ * Firefox registration event * /
If (document.addEventListener) {
Document.addEventListener ("DOMMouseScroll", MouseWheel,false)
}
_ window.onmousewheel=_document.onmousewheel=MouseWheel;//IE/Opera/Chrome
The mouse switches pictures by scrolling the wheel.
Focus on the js code, different browsers mouse wheel events are not the same, to put it bluntly, there are mainly two kinds, onmousewheel (IE/Opera/Safari/Chrome) and DOMMouseScroll (Firefox), if you want to be compatible with firefox, you should use addEventListener listening, this function has three parameters, addEventListener (type,listener,useCapture), type is click,focus. Type, while listener can either write the method function () {} directly, or call the written method body, as in my example. UseCapture is a Boolean value, with only true and false, indicating the response order of the event. Select false to use bubbing (bubbling), and option true to use Capture. There will be a detailed explanation of addEventListener in the future.
In the MouseWheel method, e.wheelDelta is compatible with other browsers such as IE. Every time you scroll the wheel, you will return + 3 Firefox 3 (scroll up / down), while e.detail is compatible with Firefox browser. Every time you scroll the wheel, you will return + 120 CPM 120 (scroll up / down). You can judge whether to scroll up or down by these returned values. The for loop only allows the pictures to be hidden and displayed sequentially, which is not difficult to understand.
On "JavaScript how to achieve the mouse wheel control page picture switch" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
