Javascript图片滚动

核心提示：本文示例源代码或素材下载 这两天做了一个图片滚动的效果，拿出来和大家共享，Javascript图片滚动，效果很简单，不过这是我第一次使用js库(prototype1.6)， 查看示例: http://220.194.56.98:8000/LongWayDemos/slideshow/这是第一个类，主要来负责一个

本文示例源代码或素材下载

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