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

    

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

var SlideShow = Class.create({     //width:宽度    //height:高度    //btns:按钮数组    //content:内容    //options:选项    initialize:function(width,height,btns,content,options){         var self = this;         this.width = width;         this.height = height;         this.btns = btns;         this.length = btns.length;         this.content = content;         this.intervalId = new Object();         this.autoPlayTimeout = new Object();                  //auto:自动转换        //updown:上下还是左右        //mouseType:"click"或者"mouseover"        //autoInterval:自动播放时切换的间隔        //bufferStep:缓动的步长 数值越大 缓动所用时间越多 一般在5-15之间        this.options = {//prototype 1.6.0.2 ln1159            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(new SlideItem(self,btn,index));         });                  this.items[0].switchTo();     },          autoPlay:function(){         this.autoPlayTimeout = setTimeout(autoMove,this.options.autoInterval);         var self = this;         function autoMove(){             if(self.currentIndex + 1 >= self.length)                 self.items[0].switchTo();             else                 self.items[self.currentIndex + 1].switchTo();         }     } });

 

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

var SlideItem = 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);         var self = 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);         var self = this;         function setPosition(){             var currentPosition = parseInt(self.slideShow.content.getStyle(self.slideShow.options.updown?"top":"left"));             var targetPosition = self.position;             var step = (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();             }         }     } });

 

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