Javascript图片滚动

　　这两天做了一个图片滚动的效果，拿出来和大家共享。效果很简单，不过这是我第一次使用js库(prototype1.6)。虽然所引用的prototype文件大小远远超过了自己所写的代码，但是这毕竟是学习而已，用js库真的能让代码更简洁。

　　查看示例: http://220.194.56.98:8000/LongWayDemos/slideshow/

　　这是第一个类，主要来负责一个SlideShow的初始化和自动播放，具有多个SlideItem实例，存储在items数组中

varSlideShow=Class.create({
　　//width:宽度
　　//height:高度
　　//btns:按钮数组
　　//content:内容
　　//options:选项
　　initialize:function(width,height,btns,content,options){
　　　　varself=this;
　　　　this.width=width;
　　　　this.height=height;
　　　　this.btns=btns;
　　　　this.length=btns.length;
　　　　this.content=content;
　　　　this.intervalId=newObject();
　　　　this.autoPlayTimeout=newObject();
　　　　
　　　　//auto:自动转换
　　　　//updown:上下还是左右
　　　　//mouseType:"click"或者"mouseover"
　　　　//autoInterval:自动播放时切换的间隔
　　　　//bufferStep:缓动的步长数值越大缓动所用时间越多一般在5-15之间
　　　　this.options={//prototype1.6.0.2ln1159
　　　　　　auto:true,
　　　　　　updown:false,
　　　　　　mouseType:"click",
　　　　　　autoInterval:3000,
　　　　　　bufferStep:8,
　　　　　　btnFocusHandler:null,
　　　　　　btnBlurHandler:null
　　　　}
　　　　Object.extend(this.options,options||{});
　　　　
　　　　this.items=[];
　　　　this.currentIndex=0;
　　　　this.btns.each(function(btn,index){
　　　　　　self.items.push(newSlideItem(self,btn,index));
　　　　});
　　　　
　　　　this.items[0].switchTo();
　　},
　　
　　autoPlay:function(){
　　　　this.autoPlayTimeout=setTimeout(autoMove,this.options.autoInterval);
　　　　varself=this;
　　　　functionautoMove(){
　　　　　　if(self.currentIndex+1>=self.length)
　　　　　　　　self.items[0].switchTo();
　　　　　　else
　　　　　　　　self.items[self.currentIndex+1].switchTo();
　　　　}
　　}
});

这是第二个类，是SlideShow的一页，主要有switchTo方法，负责转换的具体实现

varSlideItem=Class.create({
　　//slideShow:SlideShow实例
　　//btn:按钮
　　//index:按钮的索引
　　initialize:function(slideShow,btn,index){
　　　　this.slideShow=slideShow;
　　　　this.btn=btn;
　　　　this.index=index;
　　　　
　　　　this.position=-index*(this.slideShow.options.updown?this.slideShow.height:this.slideShow.width);
　　　　varself=this;
　　　　this.btn.observe(this.slideShow.options.mouseType,function(){self.switchTo.apply(self,arguments)});
　　},
　　
　　switchTo:function(){
　　　　clearInterval(this.slideShow.intervalId);
　　　　if(this.slideShow.options.auto)
　　　　　　clearTimeout(this.slideShow.autoPlayTimeout);
　　　　　　
　　　　if(this.slideShow.options.btnBlurHandler)
　　　　　　this.slideShow.options.btnBlurHandler(this.slideShow.items[this.slideShow.currentIndex].btn);
　　　　this.slideShow.currentIndex=this.index;
　　　　
　　　　if(this.slideShow.options.btnFocusHandler)
　　　　　　this.slideShow.options.btnFocusHandler(this.btn);
　　　　this.slideShow.intervalId=setInterval(setPosition,10);
　　　　varself=this;
　　　　functionsetPosition(){
　　　　　　varcurrentPosition=parseInt(self.slideShow.content.getStyle(self.slideShow.options.updown?"top":"left"));
　　　　　　vartargetPosition=self.position;
　　　　　　varstep=(targetPosition-currentPosition)/self.slideShow.options.bufferStep;
　　　　　　
　　　　　　if(Math.abs(step)<1&&step!=0){
　　　　　　　　step=(targetPosition-currentPosition)>0?1:-1;
　　　　　　}
　　　　　　currentPosition+=Math.round(step);
　　　　　　
　　　　　　if(self.slideShow.options.updown)
　　　　　　　　self.slideShow.content.setStyle({"top":currentPosition+"px"});
　　　　　　else
　　　　　　　　self.slideShow.content.setStyle({"left":currentPosition+"px"});
　　　　　　
　　　　　　if(targetPosition==currentPosition){
　　　　　　　　clearInterval(self.slideShow.intervalId);
　　　　　　　　if(self.slideShow.options.auto)
　　　　　　　　　　self.slideShow.autoPlay();
　　　　　　}
　　　　}
　　}
});


　　注：缓动效果的实现借鉴了cloudgamer所用的方法。即根据初始值和目标值计算出每一步的步长，初始值离目标值越大步长越大，初始值离目标值越小步长越小，从而实现缓动