代碼分析:寫一個(gè)picSlider類實(shí)現(xiàn)代碼封裝
代碼如下:








CSS樣式
代碼如下:
#container{width:459px; height:200px; background-color:Black;position:relative;overflow:hidden;}
#container img{position:absolute; width:360px;height:300px;display:block;top:0;width:280px;height:200px;}

JS:picSlider類
代碼如下:
var picSlider = new Class({
Implements: Options,
options: {
container: "container",
imgsWidth: 0.6,
},
initialize: function (options) {
this.setOptions(options);
this.container = $(this.options.container);
this.triggers = this.container.getElementsByTagName("img");
this.containerWidth = this.container.getSize().x; //get container's width
this.imgWidth = this.containerWidth * this.options.imgsWidth;
this.aveWidth = this.containerWidth / this.triggers.length;
this.newAveWidth = (this.containerWidth - this.imgWidth) / (this.triggers.length - 1);
this.setImgsInit(); //初始化圖片展示
this.start();
},
setImgsInit:function(){
for(var i=0;ithis.triggers[i].setStyle("left",i*this.aveWidth);
}
},
start:function(){
for(var i=0;ithis.triggers[i].set("tween",{property:"left",duration:300, fps:80}); //為每個(gè)元素設(shè)置動(dòng)畫參數(shù)
this.triggers[i].addEvent("mouseover",this.slider.bindWithEvent(this,[i]));//綁定slider函數(shù)
}
},
slider:function(e,at){
e.stop();
for(var i=1;iif(i<=at){
this.triggers[i].get("tween").start(i*this.newAveWidth);
}else{
this.triggers[i].get("tween").start(this.imgWidth+(i-1)*this.newAveWidth);
}
}
}
});
new picSlider();

如果想直接在本地運(yùn)行,請(qǐng)引入

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com