还是觉得for(i=0;i<buttons.length;i++){ if(buttons[i].className=='on'){ buttons[i].className=''; break; } 这里有点难理解,这里的i会变吗?每次调用的时候是怎么运行的呢
自己在for语句后面设一个console.log(index);然后进入sources调控下代码,看看代码怎么运行自己就能看明白了,别人跟你说了半天也不知道说什么,代码有何问题都可以自己去调控下看看怎么运行,还可以显示代码哪个地方错误!
因为每次只会有一个被选中,所以会依次遍历,也就是用for循环,找到前一个被选中的小点点(button下的某个span),然后找到了,就将效果取消掉,也就是让他不再有on这个类名,所以才会有if花括号里面的内容,能理解吗
这个break是在if语句里,终止只是终止了if语句。如果把break移到if外,就是终止for循环了。应该是这样吧
你说的这个我知道,要是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>
for 是个循环,循环的次数是根据bottons.length来定。for(初始化值; 初始值 < = 终止条件; 初始值自加或者自减)
初始化值没变化一次,执行一次
{ if(buttons[i].className=='on'){ buttons[i].className=''; break; }
这个方法体类的内容,如果某一个buttons[i]的className为on,就删除这个class。循环结束,即使初始值还没到到终止条件循环也结束。