跳动不正常。没点击之前是正常的,点击之后就快速闪

来源:3-3 bug解决及定时器优化

慕粉1906006274

2017-02-09 14:57

function $(id){

return typeof id==='string'? document.getElementById(id):id;

}

window.onload=function(){

  //当前页面高亮显示的页签的索引

  var index=0;

  var timer=null;

  

  var lis = $('notice-tit').getElementsByTagName('li');

  var divs = $('notice-con').getElementsByTagName('div');

  //添加手动切换遍历li

  for(var i=0;i<lis.length;i++){

    lis[i].id=i;

lis[i].onclick=function(){

   //当点击时会一直停留当前页面。需清除定时器

clearInterval(timer);

changeOption(this.id);

}

lis[i].onmouseout=function(){

   timer=setInterval(autoPlay,2000);

}

}

if(timer){     

clearTimeout(timer);

timer=null;

}

  //添加定时器,改变高亮索引

   timer=setInterval(autoPlay,2000);

function autoPlay(){

   index++;       //做判断,不然会一直增加

   if(index>=lis.length){

  index=0; 

   } 

   changeOption(index);

}

function changeOption(curIndex){   //接收当前index

 console.log(curIndex) ;

 for(var j=0;j<lis.length;j++){

     lis[j].className="";

 divs[j].style.display="none"; 

  }

//console.log(index);

//高亮显示当前页签

  lis[curIndex].className="select";

  divs[curIndex].style.display="block";

  index=curIndex;

}

}


写回答 关注

1回答

  • Future晨
    2017-02-22 10:46:39

    http://img.mukewang.com/58acfb6d00017f5204450107.jpg应该是clear函数没起作用,我也遇到了这个问题,还没找到办法解决。

Tab选项卡切换效果

本课程详细介绍网页页面中最流行常用的tab切换效果

65466 学习 · 573 问题

查看课程

相似问题