图片轮播是一个很常见的业务需求，很多地方都会出现，譬如京东商城首页上就有这么一个，今天我又再次模仿一个，不过今天要用原型模式来写，可是发现自己还是领悟的不够好，希望各位批评指点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播</title>
<style>
.cl:after{content: "";font-size: 0px;display: block;clear: both;}
.cl{zoom:1;}
.cl-l{float: left;}
.lunbo{margin: 0 auto; 550px;height:240px;border: 1px solid #CDCDCD;position: relative;}
.select{position: absolute;display:inline-block; 210px;height: 30px;top: 210px;left: 350px;}
.select a{display: block;float:left; 22px;height: 22px;margin-right: 10px;border: 1px solid #cdcdcd;border-radius: 12px 12px 12px 12px;background: #cdcdcd;text-align: center;}
a.curr{background: red;}
</style>
</head>
<body>
<div class="lunbo">
<div class="pic cl"><img src="../css/1.jpg"></div>
<div class="select cl cl-l"><a class="curr">1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a></div>
</div>
<script>
function play(index,selectArray,showArea,images,interval){
this.index=index;
this.selectArray=selectArray;
this.showArea=showArea;
this.images=images;
this.interval=interval;
}
play.prototype={
constructor:play,
start:function(){
var ind=this.index;
this.removeClass();
this.addClass();
this.showArea.src=this.images[ind];
this.index++;
if(this.index==6) this.index=0;
},
init:function(){
_this=this;
for(var i=0;i<_this.selectArray.length;i++){
this.selectArray.ind=i;
this.selectArray[i].onmouseover=function(){
_this.stop();
};
this.selectArray[i].onmouseout=function(){
_this.next();
};
}
this.interval= setInterval(function(){
_this.start()
},2000)
},
stop:function(event){
clearInterval(this.interval);
var event=event||window.event;
var target=event.target? event.target:event.srcElement;
this.index=target.innerText-1;
this.removeClass();
this.addClass();
this.showArea.src=this.images[this.index];
},
next:function(){
_this=this;
this.interval= setInterval(function(){
_this.start()
},2000)
},
removeClass:function(){
document.getElementsByClassName("curr")[0].className="";
},
addClass:function(){
this.selectArray[this.index].className+="curr";
}
}
var selectArray=document.getElementsByTagName("a");
var showArea=document.getElementsByTagName("img")[0];
var images=["../css/1.jpg","../css/2.jpg","../css/3.jpg","../css/4.jpg","../css/5.jpg","../css/6.jpg"];
var interval=undefined;
var obj=new play(1,selectArray,showArea,images,interval);
obj.init();
</script>
</body>
</html>