别看，看了脑仁疼，别怪我没说
标题都起不明白，还学什么JS
逼自己用原生JS，咱也不知道为啥
好消息是实现了，坏消息是为什么我想不到更好的方法
久仰mousewheel兼容乱套的大名，但是我秉着????不平何以平天下的原则，先把chrome弄明白，别的浏览器先稍稍

整体思路（趁还能看懂自己的代码）

1、我想模拟那些不用滚动条，像PPT一样滚动的页面，于是乎想到了mousewheel事件

我想要在哪滚动都行，所以把事件给了window，事件函数待会再说

window.addEventListener('mousewheel', mouseWheelEvent)

2、我又想再页面右边加上像轮播图一样的圆点点

所以我根据section的数量（我想把section用来包裹小页面），总之镶上了圆点点们，捎带脚给它们装了index属性，方便以后跟section的索引值挂钩

//i为控制页面索引号的变量，顺便同步小圆点点
var i  = 0
for (let j = 0; j < section.length; j++) {
        var li = document.createElement('li')
        li.setAttribute('index', j)
        ul.appendChild(li)
    }
    //获取li
    var li = ul.querySelectorAll('li')
    //给相应的li添加类名
    li[i].className = 'current'

3、我还想让切换模式为淡入淡出（还想有位移动画，呼之欲出了）

也不知道该怎么整，于是就有了这个别管怎么写的反正我实现了函数，只不过终点永远是 -0.2 和 1.2，是浮点数精度的问题吗？

function fadeOut(obj, callback) {
    clearInterval(obj.timer)
    var opa = 1
    clearInterval(obj.timer)
    obj.timer = setInterval(function(){
        if (opa <= 0) {
            clearInterval(obj.timer)
            callback && callback()
        }
        opa -= 0.1
        obj.style.opacity = opa
    }, 25)
}

其实还有个fadeIn()函数，就是把 1 换成 0 ， - 换成 +

4、动画函数搞定了我寻思着咋的也该写事件函数了8

这一写不要紧
当时我寻思：

• 可以用事件对象的wheelDelta判断是往下滚还是往上滚
• 我用的是 i 作为section的索引值，所以 i 打死得在 [0, section.length - 1]里
• 所以要给 i 加限制，滚到第一个或最后一个跳出函数，i 不能再增减了
• 我想要当前section先缓出fadeOut，然后下一个再缓入，所以缓入动画得在缓出动画的回调函数里（不然就一跨堆执行了）
• 滚的时候小圆点点也得跟着滚呐，“把他们，也算上！”
• 还有最重要的，得等我缓出缓入一个来回都滚完了，你才能让我滚下一个，动画期间是要禁止函数被再次执行的，不然就鬼畜了，那就来个节流阀8，调用函数后立马关闭，缓入动画执行完再开启
• 我寻思也差不多了

var canWheel = true
function mouseWheelEvent(e) {
        if (canWheel) {
        	//节流阀
            canWheel = false
            var flag = e.wheelDelta < 0 ? 1 : 0
            //如果往下滚
            if (flag) {
                //如果还能往下滚
                if (i < section.length - 1) {
                    fadeOut(section[i], function(){
                        for (let j = 0; j < section.length; j++) {
                            section[j].style.display = 'none'
                            section[j].style.opacity = 0
                        } 
                        //先显示，再全透明，再缓入
                        section[++i].style.display = 'block'
                        fadeIn(section[i], function() {
                            //这里是整个函数时间上最末尾
                            canWheel = true
                        })
                        //滚动时，小圆圈同步
                        for (let j = 0; j < li.length; j++) {
                            li[j].className = ''
                            li[i].className = 'current'
                        }
                    })
                } else {
                    //如果不能往下滚，给个true，防止再也进不来
                    canWheel = true
                    return false
                }
            //如果往上滚
            } else {       
                if (i > 0) {
                    fadeOut(section[i], function(){
                        for (let j = 0; j < section.length; j++) {
                            section[j].style.display = 'none'
                            section[j].style.opacity = 0
                        } 
                        section[--i].style.display = 'block'
                        fadeIn(section[i], function() {
                            canWheel = true
                        })
                        for (let j = 0; j < li.length; j++) {
                            li[j].className = ''
                            li[i].className = 'current'
                        }
                    })
                }
                else {
                    canWheel = true
                    return false
                }
            }
        }
    }

5、然后呢，让小圆点点也主动一次8

于是我就接着寻思嗷

• 圆点点像控制section容易，就是得让点击圆点点和鼠标滚轮互相认识认识，俩人得唠一套嗑
• index是长在 li 身体里的，i 是间接跟section走的，那就让 i 听 index 的8

//小圆圈section绑定
for (let j = 0; j < li.length; j++) {
    li[j].addEventListener('click', function(){
        //获取index
        var index = this.getAttribute('index')
        //排它
        for (let j = 0; j < li.length; j++) {
            li[j].className = ''
            this.className = 'current'
        }
        //准备同步section
        fadeOut(section[i], function(){
            i = index
            //同步section
            for (let j = 0; j < section.length; j++) {
                section[j].style.display = 'none'
                section[j].style.opacity = 0
            }
            section[i].style.display = 'block'
            fadeIn(section[i])
        })  
    })
}

6、最后勉勉强强达到的效果

7、之后要把section里面塞点东西，再加个位移动画配合透明度动画。。。

最后发现一个问题：我用PPT不好吗？

最后

以上就是明理菠萝为你收集整理的JS鼠标滚轮事件mousewheel实现翻页（记录）整体思路（趁还能看懂自己的代码）的全部内容，希望文章能够帮你解决JS鼠标滚轮事件mousewheel实现翻页（记录）整体思路（趁还能看懂自己的代码）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。