还是觉得for(i=0;i<buttons.length;i++){ if(buttons[i].className=='on'){ buttons[i].className=''; break; } 这里有点难理解，这里的i会变吗？每次调用的时候是怎么运行的呢
2015-10-25
你说的这个我知道，要是i=0的时候，if的条件就成立，后面重复再调用这个函数，i的值会自增？还是说i还是为0？这个每次不都是调用一次就终止循环了吗？轮播的效果怎么做到的不懂！
<script type="text/javascript">
window.onload=function(){
var container=document.getElementById('container');
var list=document.getElementById('list');
var buttons=document.getElementById('buttons').getElementsByTagName('span');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
var index=1;
//滚动函数
function aa(x){
var nexLeft=parseInt(list.style.left)+x;
list.style.left=nexLeft+'px';
if(nexLeft<-3000){
list.style.left="-600px";
}
if(nexLeft>-600){
list.style.left="-3000px";
}
}
//小圆点切换函数
function bb(){
for(i=0;i<buttons.length;i++){
if(buttons[i].className=='on'){
buttons[i].className='';
break;
}
}
buttons[index-1].className='on';
}
next.onclick=function(){
if(index==5){
index=1;
}else{
index +=1;
}
bb();
aa(-600);
}
prev.onclick=function(){
if(index==1){
index=5;
}else{
index -=1;
}
bb();
aa(600);
}
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="5.jpg" alt="1"/>
<img src="1.jpg" alt="1"/>
<img src="2.jpg" alt="2"/>
<img src="3.jpg" alt="3"/>
<img src="4.jpg" alt="4"/>
<img src="5.jpg" alt="5"/>
<img src="1.jpg" alt="5"/>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
举报
