问答详情
源自:4-1 无限滚动

还是觉得for(i=0;i<buttons.length;i++){ if(buttons[i].className=='on'){ buttons[i].className=''; break; } 这里有点难理解,这里的i会变吗?每次调用的时候是怎么运行的呢

还是觉得for(i=0;i<buttons.length;i++){ if(buttons[i].className=='on'){ buttons[i].className=''; break; } 这里有点难理解,这里的i会变吗?每次调用的时候是怎么运行的呢

提问者:qq_白首不分离_0 2015-10-25 16:22

个回答

  • 慕粉2239296125
    2017-03-13 01:42:01

    自己在for语句后面设一个console.log(index);然后进入sources调控下代码,看看代码怎么运行自己就能看明白了,别人跟你说了半天也不知道说什么,代码有何问题都可以自己去调控下看看怎么运行,还可以显示代码哪个地方错误!

  • 逾时不候3172329
    2017-02-28 15:52:51

    因为每次只会有一个被选中,所以会依次遍历,也就是用for循环,找到前一个被选中的小点点(button下的某个span),然后找到了,就将效果取消掉,也就是让他不再有on这个类名,所以才会有if花括号里面的内容,能理解吗


  • bukuer
    2015-12-25 06:53:52

    这个break是在if语句里,终止只是终止了if语句。如果把break移到if外,就是终止for循环了。应该是这样吧

  • qq_白首不分离_0
    2015-10-25 16:47:19

    你说的这个我知道,要是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">&lt;</a>

    <a href="javascript:;" id="next" class="arrow">&gt;</a>

    </div>


    </body>


  • Y_du
    2015-10-25 16:30:52

    for 是个循环,循环的次数是根据bottons.length来定。for(初始化值; 初始值 < = 终止条件; 初始值自加或者自减)

    初始化值没变化一次,执行一次

    { if(buttons[i].className=='on'){ buttons[i].className=''; break; }

    这个方法体类的内容,如果某一个buttons[i]的className为on,就删除这个class。循环结束,即使初始值还没到到终止条件循环也结束。