无法自动播放,目前只想先把一个轮播完成,再完成其他的,小白一枚第一次写对象,求大神告知
<div class="slide" id="slide1">
<ul class="list">
<li><a href="#"><img src="img/img1.jpg" alt=""></a></li>
<li><a href="#"><img src="img/img2.jpg" alt=""></a></li>
<li><a href="#"><img src="img/img3.jpg" alt=""></a></li>
<li><a href="#"><img src="img/img4.jpg" alt=""></a></li>
<li><a href="#"><img src="img/img5.jpg" alt=""></a></li>
</ul>
<ul class="btn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
window.onload=function(){
new Slide('slide1');
}
function Slide(id){
_this=this;
var box=document.getElementById(id); //总容器
this.ul=box.getElementsByClassName('list')[0]; //ul
this.aLi=this.ul.getElementsByTagName('li'); //li集合
this.len=this.aLi.length; //li个数
this.liWidth=parseInt(getStyle(this.aLi[0],'width')); //一个li的宽度
this.aBtn=box.getElementsByClassName('btn')[0].getElementsByTagName('li'); //按钮集合
this.curindex=0; //每一个对象的计数器
this.timer=null; //每一个对象的定时器
this.tab();
this.autoplay();
}
Slide.prototype.tab=function(){
for (var i = 0; i < this.aBtn.length; i++) {
this.aBtn[i].index=i;
this.aBtn[i].onmouseover=this.tabover;
}
};
Slide.prototype.tabover=function(){
for (var i = 0; i < _this.aBtn.length; i++) {
_this.curindex=this.index;
_this.aBtn[i].className='';
}
_this.aBtn[_this.curindex].className='active';
startMove(_this.ul,'left',-_this.curindex*_this.liWidth);
}
Slide.prototype.autoplay=function(){
this.timer=setInterval(this.autoli,1000)
};
Slide.prototype.autoli=function(){
_this.curindex++;
if(_this.curindex==_this.len){
_this.curindex=0;
}
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…