图片轮换是各个网站几乎最常见的效果了，用javascript操作DOM元素的方式，具有和页面无缝结合，无须加载FLASH插件，方便更新等优点，所以被广泛应用。
虽然形式各异，但是究其主要原理 无非是 在固定区域轮换显示不容内容，可以实现鼠标点播，自动轮换和暂停轮换等，所以今天用js写的这个东西也是按照这个思路去实现，其功能包括 初始化 交互处理 步进程序 自动轮换 暂停 。
点此查看
在封装中处理时钟的时候遇到点问题，多方搜索无果，最后在JS牛人argb (
argb@live.cn)的指导下 采用bind函数解决，既然没有人说方法，在此就说一下，希望对有同样疑惑的同仁有所帮助。代码如下：
var bind = function(object, fn){
return function(){
fn.apply(object, arguments);
}
}
//封装中处理时：
auto:function(){
if(!this.itv){
this.itv=window.setInterval(bind(this,this.step),this.time);
}
}
程序所有代码如下（也可查看DEMO源码）：
javascript 幻灯片代码
var bind = function(object, fn){
return function(){
fn.apply(object, arguments);
}
}
function fcs(id,time){
return new fcs.prototype.init(id,time);
}
fcs.prototype={
init:function(id,time){
var othis=this;
this.idx=0;
this.itv=false;
this.time=time || 3000;
this.ppt=document.getElementById(id);
this.mpc=this.ppt.getElementsByTagName("div")[0];
this.mpcdiv=this.mpc.getElementsByTagName("div");
this.mpclen=this.mpcdiv.length;
this.mpcimg=this.mpc.getElementsByTagName("img");
this.ul=document.createElement("ul");
this.h2=this.ppt.getElementsByTagName("h2")[0];
for(var i=0; i<this.mpclen; i++){
this.ul.innerHTML+="<li>"+(i+1)+"<\/li>";
}
this.mpc.appendChild(this.ul);
this.li=this.ul.getElementsByTagName("li");
this.hdlr();
},
hdlr:function(){
this.play();
this.auto();
var othis=this;
for(var i=0; i<this.mpclen; i++){
(function(){
var ii=i;
othis.li[ii]["onclick"]=function(){
othis.idx=ii;
othis.play();
}
})()
}
this.ppt.onmouseover=function(){ othis.pause() }
this.ppt.onmouseout=function(){ othis.auto() }
},
play:function(){
for(var i=0; i<this.mpclen; i++){
if(i!==this.idx){
this.mpcdiv[i].style.display="none";
this.li[i].className="";
}else{
this.mpcdiv[i].style.display="";
this.li[i].className="cur";
this.h2.innerHTML=this.mpcimg[i].getAttribute("alt");
}
}
},
step:function(){
this.idx+=1;
//alert(this.idx)
if(this.idx==this.mpclen) this.idx=0;
this.play();
},
auto:function(){
if(!this.itv){
this.itv=window.setInterval(bind(this,this.step),this.time);
}
},
pause:function(){
var othis=this;
if(othis.itv){
window.clearInterval(othis.itv);
othis.itv=false;
}
}
}
fcs.prototype.init.prototype=fcs.prototype;
//实例化 可以传进两个参数 第一个为id 第二个为可选的时间间隔
fcs("ppt");
fcs("ppt2",5000);
fcs("ppt3");
fcs("ppt4");
最后说明一下：这个小程序只是实现了一个原形，想要各种效果的话 可以自己重写 play 函数 其他一些相关的效果可见如下：