基于mootools 1.3框架下的图片滑动效果代码

　　<div id="container">

　　<img src="http://files.glzy8.com/file_images/article/201104/r_song1.jpg" alt="" />

　　<img src="http://files.glzy8.com/file_images/article/201104/r_song2.jpg" alt="" />

　　<img src="http://files.glzy8.com/file_images/article/201104/r_song3.jpg" alt="" />

　　<img src="http://files.glzy8.com/file_images/article/201104/r_song4.jpg" alt="" />

　　<img src="http://files.glzy8.com/file_images/article/201104/r_song5.jpg" alt="" />

　　</div>

　　#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;}

　　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;i<this.triggers.length;i++){

　　this.triggers[i].setStyle("left",i*this.aveWidth);

　　}

　　},

　　start:function(){

　　for(var i=0;i<this.triggers.length;i++){

　　this.triggers[i].set("tween",{property:"left",duration:300, fps:80}); //为每个元素设置动画参数

　　this.triggers[i].addEvent("mouseover",this.slider.bindWithEvent(this,[i]));//绑定slider函数

　　}

　　},

　　slider:function(e,at){

　　e.stop();

　　for(var i=1;i<this.triggers.length;i++){

　　if(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();