常用的js插件-配合滚轮事件左右滚动

CSS:

.slideStyle{ position:relative; overflow:hidden;width:400px; height:100px; border:1px solid #ccc;}
.slideStyle span.btn{ position:absolute; display:block;width:10px; height:100px; text-align:center; line-height:100px; color:#FF0; cursor:pointer; background:#CCC;}
.slideStyle .leftBtn{ left:0;}
.slideStyle .rightBtn{right:0;}
.slideStyle span.no{ color:#666; background:#333; cursor:default;}
.slideStyle div.scrollWrap{ margin:7px 0 0 10px;}
.slideStyle ul{ height:85px; width:770px;}
.slideStyle ul li{ float:left; display: inline;}
.slideStyle ul li span{ display:block; background:#CCC; width:85px; height:85px; margin:0 5px;}

 

DOM:

    <div class="Slide slideStyle">
        <span class="btn leftBtn no"><</span>
        <span class="btn rightBtn">></span>
        <div class="scrollWrap">
            <ul class="scroll">
                <li><span>1</span></li>
                <li><span>2</span></li>
                <li><span>3</span></li>
                <li><span>4</span></li>
                <li><span>5</span></li>
                <li><span>6</span></li>
                <li><span>7</span></li>
                <li><span>8</span></li>
            </ul>
        </div>
    </div>

JS:

function addEvent(o,type,scrollUpFun,scrollDownFun){
                if(o.attachEvent){
                    o.attachEvent("on"+type,function(e){
                                                    i=e.wheelDelta;
                                                    if(i<0){
                                                        scrollDownFun.call(o);
                                                        }else{
                                                            scrollUpFun.call(o);
                                                            };
                                                  })
                    }else if(o.addEventListener){
                            type=type=="mousewheel"?"DOMMouseScroll":type;
                            o.addEventListener(type,function(e){
                                                    i=e.detail;
                                                    if(i<0){
                                                        scrollDownFun.call(o);
                                                        }else{
                                                            scrollUpFun.call(o);
                                                            };
                                                    },false)
                        }else{
                            o["on"+type]=function(){
                                fun.call(this);
                                };
                            };
        };
function Scroll(obj){
        this.obj=$(obj);
        this.scrollLeftBtn=$(".leftBtn",this.obj);
        this.scrollRightBtn=$(".rightBtn",this.obj);
        this.scrollBox=$(".scroll",this.obj);
        this.size=$("li",this.scrollBox).length;
        this.loop=0;
        var _this=this;
        this.scrollLeftBtn.click(function(){_this.scrollRight(this);});
        this.scrollRightBtn.click(function(){_this.scrollLeft(this);});
        addEvent(this.scrollBox.get(0),"mousewheel",function(){_this.scrollLeftBtn.click()},function(){_this.scrollRightBtn.click()});
    };
Scroll.prototype={
    scrollRight:function(o){
            var _this=this;
            if(this.loop==1){
                $(o).addClass("no");
            }else if(this.loop==0){
                return true;
                };
            this.loop--;
            this.scrollBox.stop().animate({marginLeft:-this.loop*95+"px"},"normal",function(){
                if(_this.loop!=4){
                        _this.scrollRightBtn.removeClass("no");
                    };
            });
        },
    scrollLeft:function(o){
        var _this=this;
        if(this.loop==3){
            $(o).addClass("no");            
            }else if(this.loop==4){
                return true;
            };
        this.loop++;
        this.scrollBox.stop().animate({marginLeft:-this.loop*95+"px"},"normal",function(){
                                                                                        if(_this.loop!=0){
                                                                                            _this.scrollLeftBtn.removeClass("no");
                                                                                            };
                                                                                        });
        }
    };
Scroll.init=function(scrolls){
        var _this=this;
        scrolls.each(function(){
                              new _this(this);
                              });
    };

Scroll.init($(".Slide"));

 

转载于:https://www.cnblogs.com/yangliulang/archive/2012/12/10/2810816.html