這兩天做了一個圖片滾動的效果,拿出來和大家共用。效果很簡單,不過這是我第一次使用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所用的方法。即根據初始值和目標值計算出每一步的步長,初始值離目標值越大步長越大,初始值離目標值越小步長越小,從而實現緩動
點此下載樣本