自写原生jq滚轮插件

Posted 2020-08-31

自己仿bootStarp插件写的，思路局限，仅供交流，有好的建议还请不吝赐教
//使用方法：
                //html：需要ul>li>a的模式，a需要类名，需要设置page-scroll属性，page-scroll属性需要1以数字结尾，容器为所变化的最大页面
                //js：请传入一个事件对象，对象需要传入属性：pageAnchorName（锚点id）及contianer（容器类）
                //下标jq对象传入$navIndex属性，改变下标样式请传入类名navClass
　　　　　　　　　　//最近较为忙碌，有时间还会继续优化代码
!function($){
        // jquery 兼容的滚轮事件
                var nav_obj={
                        contianer:document.querySelectorAll(".contianer"),
                        pageAnchorName:"banner",
                        $navIndex:$(".banner_navA"),
                        navClass:"bannerChose",
                        Number:1,
            }
                var isScroll=false;//加一个判断断指针，以用来判断无论鼠标在单次无论滚动多少次，都只实现一次++或--
                var pagenum=nav_obj.Number;
                var navClass=nav_obj.navClass;
                var $htmlbody = $("html,body");
                var $navIndex=nav_obj.$navIndex

                jQuery.scrollTo=function(obj,scrolltime){
                                $($navIndex).click(function(){
                                        var scrollToDom=$(this).attr("page-scroll");
                                        var tranNum=scrollToDom;
                                        pagenum=Number(tranNum.replace((/[^0-9]/g),""));
//                                        console.log(pagenum)
                                        $navIndex.eq(pagenum-1).addClass(navClass).parent().siblings("li").find("a").removeClass(navClass);
                                        $navIndex.eq(pagenum-1).parents().removeClass("liHover").siblings("li").addClass("liHover");
                                        //由于暂时没有考虑动态创建，请按默认样式布局ul>li.liHiver>a.naveClass
                                        $htmlbody.animate(
                                        {
                                                scrollTop:$(scrollToDom).offset().top
                                        },
                                        scrolltime
                                        );
                                        return false;
                                });
                        };
                        $.scrollTo($navIndex,1000);
                $(window).on("mousewheel DOMMouseScroll", function (e) {
                        var e=e||window.event;
                         var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                                        (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));//firfox
                        $(window).trigger("scrollchangePageScroll", [delta, nav_obj])
                });
                $(window).on("scrollchangePageScroll", function (e,delta, nav_obj){
                        var constructor=nav_obj;          
                        var pageName= constructor.pageAnchorName
                //        console.log(delta)
                    if (delta > 0) {
                             // 向上滚
                       //console.log("wheelup");  
                        if(pagenum<=1){
                                         pagenum=1;
                        }else{
                                        if(isScroll==false){
                                                isScroll=true;         
                                                pagenum--;
                                        }                  
                        } 
                    } else {
                        // 向下滚
                                    //console.log("wheeldown");
                        if(pagenum>=nav_obj.contianer.length){
                                        pagenum=nav_obj.contianer.length;
                        }else{
                                        if(isScroll==false){
                                                isScroll=true;                              
                                                //console.log(isScroll)
                                                pagenum++;        
                                        //        console.log(pagenum)
                                        }                    
                        }
                //      if($htmlbody.scrollTop()==)
                    }
                  //  console.log(pagenum)
                    changeBg(constructor,pagenum);
                    function changeBg(constructor,num){         
                //                  console.log("#"+pageName+""+ num + " ")   
                                    if($htmlbody.is(":animated")){ 
                                    }else{                         
                                            constructor.$navIndex.eq(num-1).addClass(constructor.navClass).parent().siblings("li").find("a").removeClass(constructor.navClass);
                                            constructor.$navIndex.eq(num-1).parents().removeClass("liHover").siblings("li").addClass("liHover");
                                            $htmlbody.animate({scrollTop:$("#"+pageName+""+ num + " ").offset().top},600,"swing", function () {
                                                    isScroll=false;
                                            });
                                    }
                    }
        }(jQuery);