滚轮事件的封装

因鼠标滚动事件区分为火狐滚轮事件和非火狐滚轮事件，而且其向上滚动和向下滚动的正负值不同，因此封装滚轮事件以便调用。

    function mouseWheel(obj,fn){
        var isDown=true;
        var isFirefox=navigator.userAgent.search("Firefox")==-1?false:true;
        if(isFirefox){
            obj.addEventListener("DOMMouseScroll",wheel,false);
        }else{
            obj.onmousewheel=wheel;
        }

        function wheel(e){
            var e=e||window.event;
            if(isFirefox){
                isDown=e.detail>0?true:false;
            }else{
                isDown=e.wheelDelta>0?false:true;
            }
            fn.call(obj,e,isDown);
        }
    }

滚轮轮播图

通过利用上图的滚轮事件的封装函数，来设置轮播图的纵向滚动。

    <style>
        .wheelSlide{
            width:800px;
            height:500px;
            position:relative;
            overflow:hidden;
            border:1px solid gold;
            margin:0 auto;        
        }
        .wheelSlides{
            width:800px;
            height:2500px;
            position:absolute;
            top:0;
            left:0;
            transition-duration:3s;
        }
        .wheelSlides div{
            width:800px;
            height:500px;
            line-height:500px;
            text-align:center;
            font-size:100px;
            color:white;
        }
        .wheelSlides div:nth-child(1){
            background:paleturquoise;
        }
        .wheelSlides div:nth-child(2){
            background:lightpink;
        }
        .wheelSlides div:nth-child(3){
            background:palegreen;
        }
        .wheelSlides div:nth-child(4){
            background:peachpuff;
        }
        .wheelSlides div:nth-child(5){
            background:plum;
        }
    </style>
    <div class="wheelSlide">
        <div class="wheelSlides">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
    <script>
        var wheelSlide=document.querySelector(".wheelSlide");
        var wheelSlides=document.querySelector(".wheelSlides");
        var wheelSlidesDiv=document.querySelectorAll(".wheelSlides div");
        var s={
            isAct:false,
            index:0,
        }

        mouseWheel(wheelSlide,function(e,isDown){
            if(s.isAct){
                return;
            }
            s.isAct=!s.isAct;
            setTimeout(function(){
                s.isAct=!s.isAct;
            },3000)
            if(isDown){
                s.index++;
                s.index=s.index>wheelSlidesDiv.length-1?wheelSlidesDiv.length-1:s.index;
            }else{
                s.index--;
                s.index=s.index<0?0:s.index;
            }
            wheelSlides.style.top=-s.index*500+"px";
            e.preventDefault();
        })

        function mouseWheel(obj,fn){
            var isDown=true;
            var isFirefox=navigator.userAgent.search("Firefox")==-1?false:true;
            if(isFirefox){
                obj.addEventListener("DOMMouseScroll",wheel,false);
            }else{
                obj.onmousewheel=wheel;
            }

            function wheel(e){
                var e=e||window.event;
                if(isFirefox){
                    isDown=e.detail>0?true:false;
                }else{
                    isDown=e.wheelDelta>0?false:true;
                }
                fn.call(obj,e,isDown);
            }
        }
    </script>

    
    

        
1
2
3
4
5