这两天做了一个图片滚动的效果,拿出来和大家共享。效果很简单,不过这是我第一次使用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();
}
}
});
// 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();
}
}
}
});
// 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所用的方法。即根据初始值和目标值计算出每一步的步长,初始值离目标值越大步长越大,初始值离目标值越小步长越小,从而实现缓动