carouselProto.init=function(){ var that=this; this.createBtn(); this.createArrow(); $.delegateTag(this.wrapSelec+" "+".carousel-btn","a","click",function(e,target){ $.prevent(e); that.light(target.getAttribute("index")); animate.liner(that.ele,"scrollLeft",target.getAttribute("index")*that.width); }); $.add(this.container,"mouseenter",function(){ that.stop(); removeClass(that.container,"hide"); }); $.add(this.container,"mouseleave",function(){ addClass(that.container,"hide"); that.begin=setTimeout(function(){ that.circle(); },that.t); });if (this.direction==="forward") { this.light(0); }else{ this.light(this.len-1); this.ele.scrollLeft=this.width*(this.len-1); } this.haveStart=true; };
这样改装完之后，就可以创建实例了，每个实例都会有自己的属性用于记录状态，他们都共用原型中的方法。
如果采用原型继承的方式的话，可以创建一个对象作为实例的原型对象，然后创建一个函数来生产实例：
var carouselProto={}; //把上面那些方法给这个对象 carouselProto.light=... carouselProto.go=... carouselProto.stop=... //创建实例对象函数 var carousel=function(eleSelec,wrapSelec){ var that=Object.create(carouselProto); that.wrapSelec=wrapSelec; that.ele=$(eleSelec); that.container=$(wrapSelec); that.len=that.ele.getElementsByTagName("img").length; that.width=parseInt(getCSS(that.ele.getElementsByTagName("img")[0],"width")); return that; } //创建实例，使用组件 var carousel1=carousel(".carousel",".carousel-box"); carousel1.start("forward",3,true); var carousel2=carousel(".carousel2",".carousel-box2"); carousel2.start("backward",2,true);
性能优化：
1.当点击的按钮刚好是当前被点亮的按钮时，依然会调用一次light和animate.liner。所以可以添加一个判断语句，如果点击的按钮刚好是正确的，就不要执行下面的了。
$.delegateTag(this.wrapSelec+" "+".carousel-btn","a","click",function(e,target){ $.prevent(e); var index=target.getAttribute("index"); if (index===that.active.getAttribute("index")) { return } that.light(index); animate.liner(that.ele,"scrollLeft",target.getAttribute("index")*that.width); });
2.当图片切换的时候，缓动动画正在执行。如果在缓动动画还没执行完时就点击按钮或者箭头，就会进入下一次动画，于是就会出现混乱，图片错位。性能也会受到影响。为了防止这种情况发生，可以使用一个变量，用于记录缓动动画是否正在执行，没有执行的话点击按钮或箭头才会执行函数。
liner=function(ele,prop,next){ var speed=(next-ele[prop])/10, i=0; ele.animating=true; (function(){ ele[prop]+=speed; i++; if (i<10) { setTimeout(arguments.callee,60); }else{ ele.animating=false; } })(); } if (!this.ele.animating) { this.light(nextIndex); animate.liner(this.ele,"scrollLeft",nextPosition); }
源码：源码下载demo