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

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) {