滚动鼠标/滑动触摸板切换图片

r囧r小猫 2022-12-18 10:53 143阅读 0赞

### 1、滑动鼠标/触摸板时切换图片 ###

**1.1 最终效果**  
![在这里插入图片描述][20201026155519175.gif_pic_center]  
**1.2 实现过程**

*  滑动鼠标时给img标签切换样式，从而实现突出显示的效果。
 *  鼠标/触摸板 向下滑动， 突出显示前一张图片
 *  鼠标/触摸板 向上滑动，突出显示下一张图片
 *  鼠标/触摸板滑动时，删除和添加class 实现，元素的突出显示。可设置一个index作为辅助标志。
 *  加上事件节流/防抖，控制事件的触发频率。

**1.3 如何知道鼠标/触摸板是向下还是向上滑动**

万能的网络，什么东西都可以搜索的到。。。。。[js判断鼠标滑动方向][js]

> 发生鼠标滚动事件/触摸屏滑动事件 时 通过event对象里`wheelDelta`或者`detail`值的正负来判断鼠标滚轮向上还是向下

var scrollFunc = function(e) { 
                         var e = e || window.event;
                         if(e.wheelDelta) {    
                               if(e.wheelDelta > 0) {      //当鼠标滚轮向上滚动时
                                    alert("鼠标滚轮向上滚动");
                               }
                               if(e.wheelDelta < 0) {      //当鼠标滚轮向下滚动时
                                    alert("鼠标滚轮向下滚动");
                               }
                         } else if(e.detail) { 
                               if(e.detail < 0) {    //当鼠标滚轮向上滚动时
                                    alert("鼠标滚轮向上滚动");
                               }
                               if(e.detail > 0) {    //当鼠标滚轮向下滚动时
                                    alert("鼠标滚轮向下滚动");
                               }
                         }
                    }
                    // 给页面绑定鼠标滚轮事件,针对火狐的非标准事件 
                    window.addEventListener("DOMMouseScroll", scrollFunc)
                    // 给页面绑定鼠标滚轮事件，针对Google，mousewheel非标准事件已被弃用，请使用 wheel事件代替
                    window.addEventListener("wheel", scrollFunc)
                    // ie不支持wheel事件，若一定要兼容，可使用mousewheel
                    window.addEventListener("mousewheel", scrollFunc)

**1.4 完整代码 js部分**

var imgs = document.getElementsByClassName("img-container")[0].children;
            var container = document.getElementsByClassName("img-container")[0];
            var index = 0;
            for (let i = 0; i < imgs.length; i++) {  // 根据class active-img 的添加情况，确定index的默认值，鼠标滚动/滑动触摸板时 好确定下一张图片的index
                if (imgs[i].getAttribute("id") === "active-img") { 
                    index = i;
                    break;
                }
            }
    
            // 函数节流
            function thro(fn, delay) { 
                var flag;
                return function () { 
                    if (!flag) { 
                        flag = true;
                        fn();
                        setTimeout(function () { 
                            flag = false;
                        }, delay)
                    }
                }
            }
    
            window.onmousewheel = thro(function (e) { 
                var e = e || window.event;
                if (e.wheelDelta) { 
                    if (e.wheelDelta >= 0) { 
                        console.log("向上滚动") // 向上滚动时，突出显示后面的照片。。
                        index++;
                        if (index >= imgs.length) { 
                            index = 0;
                        }
                        switchClass(index);       
                    } else { 
                        console.log("向下滚动");// 突出显示前面的照片。。
                        index--
                        if (index == -1) { 
                            index = imgs.length - 1;
                        }
                        switchClass(index)
                    }
                }
            }, 1000);
    
            function switchClass(index) { 
                for (let i = 0; i < imgs.length; i++) { 
                    if (i == index) { 
                        imgs[i].setAttribute("id", "active-img");
                    } else { 
                        imgs[i].setAttribute("id", "");
                    }
                }
            }

### 2、让每个突出显示的图片始终在中间显示 ###

题目解释：发生鼠标滚动事件/滑动触摸板的时候，突出显示的图片切换了，但是突出显示的图片始终位于这组图片的中间。

**2.1 显现效果**

![在这里插入图片描述][20201027200516123.gif_pic_center]  
**2.2 基本思路**

*  这时，index的值是固定不变的
 *  每次发生鼠标滚动/触摸板滑动事件时，只是挪动图片的位置，始终给中间的图片添加`active-img`实现图片的突出显示
 *  突出显示下一张图片，将第一张图片删除，并追加到尾部
 *  突出显示上一张图片，将最后一张图片删除，塞入到最前面

**2.3 代码部分**

if (e.wheelDelta) { 
                    if (e.wheelDelta >= 0) { 
                        console.log("向上滚动")
                        var lastChild=container.lastElementChild;
                        lastChild.setAttribute("id","");
                        container.removeChild(lastChild);
                        container.insertBefore(lastChild,container.firstElementChild)
                        switchClass(2);
                 
                    } else { 
                        console.log("向下滚动");//
                        // 找到第一个元素，将元素从第一个位置上删除，追加到尾部。
                        var firstChild=container.firstElementChild;
                        firstChild.setAttribute("id","")
                        container.removeChild(firstChild);
                        container.appendChild(firstChild);
                        switchClass(2)
                    }
                }

[20201026155519175.gif_pic_center]: /images/20221122/11df3c243e324d1b8bbb6c0a232dd88e.png
[js]: https://www.cnblogs.com/baixc/p/4778202.html
[20201027200516123.gif_pic_center]: /images/20221122/00b8cc4c95414bbf87be117c4ffe9130.png

发表评论取消回复

表情：

评论列表（有 0 条评论，143人围观）

还没有评论，来说两句吧...

相关阅读

相关 win10 电脑触摸板不能滑动_科普丨笔记本触摸板原来还能这么用？

![214137e3e0bebae2be298a2720a8fe61.png][] 日常生活中很多小白使用笔记本总会产生这样的错觉，触摸板使用起来不趁手，远不如鼠标那般灵巧。

布满荆棘的人生/ 2023年01月04日 15:55/ 0 赞/ 268 阅读

相关滚动鼠标/滑动触摸板切换图片

1、滑动鼠标/触摸板时切换图片 1.1 最终效果 ![在这里插入图片描述][20201026155519175.gif_pic_center] 1.2 实现过程

r囧r小猫/ 2022年12月18日 10:53/ 0 赞/ 144 阅读

相关 swiper实现触摸滑动

引入需要的文件 <link href="css/swiper.min.css" rel="stylesheet" type="text/css"

骑猪看日落/ 2022年08月05日 02:43/ 0 赞/ 269 阅读

相关 Synaptics 触摸板驱动“连接外部USB鼠标自动禁用”注册表补丁

以下内容保存为reg文件双击导入即可 Windows Registry Editor Version 5.00 [HKEY_CURRENT_

た入场券/ 2022年05月31日 11:37/ 0 赞/ 244 阅读

相关 JavaScript 图片滑动切换效果

序一（08/07/06）看到alibaba的一个图片切换效果，感觉不错，想拿来用用。但代码一大堆的，看着昏，还是自己来吧。由于有了做图片滑动展示效果的经验，做

本是古典何须时尚/ 2022年04月14日 01:50/ 0 赞/ 303 阅读

相关 js鼠标滚轮滚动图片切换效果

效果体验网址：[http://keleyi.com/keleyi/phtml/image/12.htm][http_keleyi.com_keleyi_phtml_image_

谁践踏了优雅/ 2022年03月31日 03:20/ 0 赞/ 393 阅读

相关 opensuse 禁用触摸板

打字时经常被触摸板干扰禁用触摸板synclient TouchpadOff=1 启用触摸板synclient TouchpadOff=0 如果触摸板无效

傷城~/ 2022年03月19日 12:16/ 0 赞/ 247 阅读

相关笔记本关闭触摸板——解决无法关闭触摸板问题

智障华硕笔记本，关闭触摸板的快捷键无效，控制面板里删除驱动的方法也不行，一重启触摸板还是有效，手一碰鼠标就动，贼烦人，咋办呢？进BIOS命令行，从根源上禁用它！华硕进入BI

拼搏现实的明天。/ 2021年11月10日 01:30/ 0 赞/ 424 阅读

相关滑动鼠标图片缩放

<img id="chgImg" src="img/1.jpg" width="760"

悠悠/ 2021年11月05日 15:26/ 0 赞/ 359 阅读

相关 mac鼠标滚轮触控板_如何在Mac上为滚轮而不是触摸板禁用自然滚动

![mac鼠标滚轮触控板][mac_] mac鼠标滚轮触控板 ![scroll-reversal-main][] Does using a scroll wheel

男娘i/ 2021年07月27日 01:43/ 0 赞/ 787 阅读