问答详情
源自:4-1 焦点轮播图效果

程序有问题,多循环一次。

其余功能已经实现。现在滑到第五张图片时,再往后会显示一段空白,再回到第一张图。请问如何修改?

  <script type="text/javascript">
  window.onload=function(){
    var wrap=document.getElementById('wrap'),
        pic=document.getElementById('pic').getElementsByTagName('li'),
        list=document.getElementById('list').getElementsByTagName('li'),
        index=0,
        timer=null;
    
      // 定义并调用自动播放函数
    timer = setInterval(start,2000);
    
    function start(){
        index++;
        if(index > list.length){
            index = 0;
        }
        change(index);
    }
      // 定义图片切换函数
    function change(curIndex){
        for(var i=0 ; i<list.length ; i++){
            pic[i].style.display = 'none';
            list[i].className = '';
        }
        pic[curIndex].style.display = 'block';
        list[curIndex].className = 'on';
        index = curIndex;
    } 
     // 鼠标划过整个容器时停止自动播放
    wrap.onmouseover = function(){
        clearInterval(timer);
    }
     // 鼠标离开整个容器时继续播放至下一张
    wrap.onmouseout = function(){
        timer = setInterval(start,2000);
    }
     // 遍历所有数字导航实现划过切换至对应的图片
     for(var j = 0;j<list.length;j++){
        list[j].id = j;
        list[j].onmouseover = function(){
            change(this.id);
        }
    }
   }

  </script>


提问者:苍白的尾巴 2016-07-16 22:30

个回答

  • 慕粉3330983
    2016-07-18 19:50:08
    已采纳

    start()里的if语句  index>=list.length