介绍 & lt; ! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0,过渡//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"比;
& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml"比;
& lt; head>
& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html;, charset=utf-8",/比;
& lt; title>鼠标通过滚动滚轮切换图片& lt;/title>
& lt; style>
# picBox {
宽度:800 px;才能高度:600 px;
保证金才能:70 px 汽车;
,,}
& lt;/style>
& lt; script>
var 才能;nowPic=1;
function 才能MouseWheel (e) {
,,,var 图片;
,,,e=e | | window.event;
,,,(i=1; i<4,我+ +){
,,,,,如果我==nowPic () {
,,,,,,,,,如果(e.wheelDelta) {//IE
,,,,,,,,,,,,,照片=. getelementbyid (“pic" + i);
,,,,,,,,,,,,,pic.style.display=癰lock";
,,,,,,,,,,,}else 如果(e.detail) {//Firefox
,,,,,,,,,,,,,照片=. getelementbyid (“pic" + i);
,,,,,,,,,,,,,pic.style.display=癰lock";
,,,,,,,,,,,}
,,,,,,,其他}{
,,,,,,,,,照片=. getelementbyid (“pic" + i);
,,,,,,,,,pic.style.display=皀one";
,,,,,,,}
,,,,,}
,,,,,如果(nowPic>=3) {
,,,,,,,nowPic=1;
,,,,,其他}{
,,,,,,,nowPic + +;
,,,,,}
,,,}/* Firefox才能注册事件*/如果才能(document.addEventListener) {
,,,,,document.addEventListener (“DOMMouseScroll" MouseWheel,假);
,,,}
window.onmousewheel才能=document.onmousewheel=MouseWheel;//IE/歌剧/铬
& lt;/script>
& lt;/head>
& lt; body>
& lt;才能h4 对齐=癱enter"在鼠标通过滚动滚轮切换图片& lt;/h4>
& lt;才能div id=皃icBox"比;
,,,& lt; https://www.yisu.com/zixun/img src=" https://cache.yisu.com/upload/information/20200622/114/62724.jpg "宽度=" 800 px高度=" 600 px " id=" pic1 ">
这篇文章主要介绍如何使用JavaScript实现鼠标滚轮控制页面图片切换功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
具体如下:
鼠标上的滚轮是一个不错的东东,为什么这么说,因为它能帮助我们快速的浏览网页,快速的进行长篇文章的阅读。对于web前端的我们来说又怎么能不注重这个鼠标滚轮呢,那么它能如何让用户更好的浏览网页呢?
最常见就是图片的切换了,能通过滚动滚轮进行图片的浏览,省得用户还要去点下一张,做这种繁琐的步骤。来看个简单的例子吧。