面向对象轮播

标签：

/*
 面向对象的图片轮播,图片的最后一张是第一张图,图片的第一张是最后一张图,鼠标移入暂停轮播,可点击按钮和页码切换图片
 使用时需要获取一下对应的元素对象
 */
            
//            var outer = $("#outer");//获取最大的框
//            var oInner = $("#inner");//获取ul
//            var item = $("#inner li");//获取li
//            var leftBtn = $("#leftBtn");//获取左边按钮
//            var rightBtn = $("#rightBtn");//获取右边按钮
//            var pageList = $("#pageList");//获取页码的ul
//            var pageBtn = $("#pageList li");//获取也页码的li

            function Lunbo(outer,oInner,item,leftBtn,rightBtn,pageList,pageBtn){
                this.outer = outer;
                this.oInner = oInner;
                this.item = item;
                this.leftBtn = leftBtn;
                this.rightBtn = rightBtn;
                this.pageList = pageList;
                this.pageBtn = pageBtn;
                this.pageNum = 1;
                this.autoPlay();
                this.pause();
                this.btn();
                this.pagination();
            }
            Lunbo.prototype.autoPlay = function(){
                var that = this;
                this.time = setInterval(function(){
                    that.pageChange(that);
                },3000);
            }
            Lunbo.prototype.pageChange = function(that){
                that.pageNum++;
                that.count();
            }
            Lunbo.prototype.count = function(fn){
                var start = parseInt(oGet.getStyle(this.oInner,"left"));
                var end = -this.pageNum*640;
                var step = (end - start)/100;
                if(fn){
                    this.move(start,end,step,fn);
                }else{
                    this.move(start,end,step);
                }
            }
            Lunbo.prototype.active = function(){
                for(var i=0;i<this.pageBtn.length;i++){
                    this.pageBtn[i].className = "";
                }
                this.pageBtn[this.pageNum-1].className = "active";
            }
            Lunbo.prototype.move = function(start,end,step,fn){
                var num = 0;
                var that = this;
                this.oInner.time = setInterval(function(){
                    start += step;
                    num++;
                    if(num==100){
                        clearInterval(that.oInner.time);
                        start = end;
                        if(step<0&&that.pageNum==that.item.length-1){
                            that.pageNum = 1;
                            start = -that.item[0].offsetWidth;
                        }else if(step>0&&that.pageNum==0){
                            that.pageNum = that.item.length-2;
                            start = -that.item[0].offsetWidth*that.pageNum;
                        }
                        if(fn){
                            fn();
                        }
                        that.active();
                    }
                    that.oInner.style.left = start + "px";
                })
            }
            Lunbo.prototype.pause = function(){
                var that = this;
                this.outer.onmouseover = function(){
                    clearInterval(that.time);
                    that.leftBtn.style.display = "block";
                    that.rightBtn.style.display = "block";
                }
                this.outer.onmouseout = function(){
                    that.autoPlay();
                    that.leftBtn.style.display = "";
                    that.rightBtn.style.display = "";
                }
            }
            Lunbo.prototype.btn = function(){
                var that = this;
                this.leftBtn.lock = true;
                this.rightBtn.lock = true;
                
                this.leftBtn.onclick = function(){
                    if(that.leftBtn.lock&&that.rightBtn.lock){
                        that.leftBtn.lock = false;
                        that.pageNum --;
                        that.count(function(){
                            that.leftBtn.lock = true;
                        });
                    }
                }
                this.rightBtn.onclick = function(){
                    if(that.leftBtn.lock&&that.rightBtn.lock){
                        that.rightBtn.lock = false;
                        that.pageNum ++;
                        that.count(function(){
                            that.rightBtn.lock = true;
                        });
                    }
                }
            }
            Lunbo.prototype.pagination = function(){
                var that = this;
                console.log(that.pageBtn)
                for(var i=0;i<this.pageBtn.length;i++){
                    this.pageBtn[i].index = i;
                    this.pageBtn[i].onclick = function(){
                        that.pageNum = this.index + 1;
                        that.count();
                    }
                }
            }
            //var newLunbo = new Lunbo(outer,oInner,item,leftBtn,rightBtn,pageList,pageBtn);

面向对象轮播

标签：

原文地址：http://www.cnblogs.com/yuejie/p/5982653.html