[js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图

在这篇文章[js高手之路]打造通用的匀速运动框架中，封装了一个匀速运动框架，我们在这个框架的基础之上，加上缓冲运动效果，然后用运动框架来做幻灯片（上下，左右），效果如下：【选择器用的是html5的，你的浏览器需要支持html5新选择器，才能看见效果额】

window.onload = function () {
function Slide() {
this.oImgContainer = document.getElementById("img-container");
this.aLi = document.getElementsByTagName("li");
this.index = 0;
}

Slide.prototype.bind = function () {
var that = this;
for (var i = 0; i < this.aLi.length; i++) {
this.aLi[i].index = i;
this.aLi[i].onmouseover = function () {
that.moveLeft( this.index );
}
}
}

Slide.prototype.moveLeft = function (i) {
this.index = i;
for( var j = 0; j < this.aLi.length; j++ ){
this.aLi[j].className = '';
}
this.aLi[this.index].className = 'active';
animate( this.oImgContainer, {
"left" : -this.index * 800
});
}

var oSlide = new Slide();
oSlide.bind();

}

View Code