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所用的方法。即根据初始值和目标值计算出每一步的步长,初始值离目标值越大步长越大,初始值离目标值越小步长越小,从而实现缓动

 点此下载示例

posted @ 2008-10-23 08:54  LongWay  阅读(4064)  评论(1编辑  收藏  举报