幻灯片效果是网站中常见的一种效果，网络上也有非常多的轮播器效果，特别是以jquery插件实现，但是对于前端开发人员来说，特别是学习js的程序员来说，这个是必需掌据的一门技术。方法/步骤1/10分步阅读

编写基本的样

div class=slide id=slide

div class=img-div

img src=img/banner1.png title=图片1/

img src=img/banner2.png title=图片2/

img src=img/banner3.png title=图片3/

/div

div class=slide-btn

a href=# class=hover●/a

a href=#●/a

a href=#●/a

/div

/div

2/10

获取文档对象

以id获取文档对象

$id:function(id){return document.getElementById(id);},

//以标签名获取文档对象

$tag:function(tagName,obj){return (obj ?obj : document).getElementsByTagName(tagName);},

以class获取文档对象

$c：function (claN,obj){

var tag = $tag(*),reg = new RegExp((^|\)+claN+(\|$)),arr=;

for(var i=0;itag.length;i++){

if (reg.test(tag.className)){

arr.push(tag);

}

}

return arr;

}

3/10

添加和移除class

$add:function(obj,claN){

reg = new RegExp((^|\)+claN+(\|$));

if (!reg.test(obj.className)){

obj.className += +claN;

}

},

//移除classs

$remve:function(obj,claN){var cla=obj.className,reg=/\*+claN+\\b/g;obj.className=cla?cla.replace(eval(reg),):},

4/10

css获取方法

css:function(obj,attr,value){

if(value){

obj.style = value;

}else{

return typeof window.getComputedStyle != undefined ? window.getComputedStyle(obj,null) : obj.currentStyle;

}

},

5/10

常用的easing方法

easing ={

linear:function(t,b,c,d){return c*t/d + b;},

swing:function(t,b,c,d) {return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;},

easeIn:function(t,b,c,d){return c*(t/=d)*t*t*t + b;},

easeOut:function(t,b,c,d){return -c*((t=t/d-1)*t*t*t - 1) + b;},

easeInOut:function(t,b,c,d){return ((t/=d/2) 1)?(c/2*t*t*t*t + b):(-c/2*((t-=2)*t*t*t - 2) + b);}

}

6/10

初始化

config:{

index:0,

auto:true,

direct:left //滚动方向，left,top,

},

init:function(){

this.slide = this.$id(slide);

this.img_div = this.$c(img-div),

this.slide_btn = this.$tag(a,this.$c(slide-btn));

this.img_arr = this.$tag(img,this.img_div);

if(this.config.auto) this.play();//是否自动播放

this.hover();//绑定导航悬停切换。即mouseover,mouseout事件

},

7/10

动画效果

animate:function(obj,attr,val){

var d = 1000;//动画时间一秒完成。

if(obj) clearInterval(obj);

var start = parseInt(zBase.css(obj,attr));//动画开始位置

//space = 动画结束位置-动画开始位置，即动画要运动的距离。

var space = val- start,st=(new Date).getTime(),m=space0? ceil:floor;

obj = setInterval(function(){

var t=(new Date).getTime()-st;//表示运行了多少时间，

if (t d){//如果运行时间小于动画时间

zBase.css(obj,attr,Math(zBase.easing(t,start,space,d)) +px);

}else{

clearInterval(obj);

zBase.css(obj,attr,val+px);

}

},20);

},

8/10

导航切换

hover:function(){

for(var i=0;ithis.slide_btn.length;i++){

this.slide_btn.index = i;

this.slide_btn.onmouseover = function(){

if(zBase.slide.timer) clearInterval(zBase.slide.timer);

zBase.config.index =this.index;

for(var j=0;jzBase.slide_btn.length;j++){

zBase.$remve(zBase.slide_btn,hover) ;

}

zBase.$add(zBase.slide_btn,hover);

zBase.animate(zBase.img_div,zBase.config.direct,-zBase.config.index*500);//500是轮播器的大小，当前索引乘以500，再取负，就是轮播器要滚动f到的位置。

}

this.slide_btn.onmouseout = function(){

zBase.play();

}

}

},

9/10

自动播放

play:function(){

this.slide.timer = setInterval(function(){

zBase.config.index++;

if(zBase.config.index=zBase.img_arr.length) zBase.config.index=0;

zBase.animate(zBase.img_div,zBase.config.direct,-zBase.config.index*500);

for(var j=0;jzBase.slide_btn.length;j++){

zBase.$remve(zBase.slide_btn,hover) ;

}

zBase.$add(zBase.slide_btn,hover);

},3000)

},

10/10

调用代码

zBase.init();

注意事项

demo文件地址：http://pan.baidu.com/s/1kVDAZYn

制作