Javascript图片滚动

     这两天做了一个图片滚动的效果，拿出来和大家共享。效果很简单，不过这是我第一次使用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();
            }
        }
    }
});

 

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

 点此下载示例