滚动鼠标/滑动触摸板切换图片-蒲公英云

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

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

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

1.1 最终效果
在这里插入图片描述
1.2 实现过程

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

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

万能的网络，什么东西都可以搜索的到。。。。。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 显现效果

在这里插入图片描述
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)
                }
            }