Tab选项卡切换我遇到了三个问题,求大神解答,谢谢

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

钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱

2017-08-14 19:05

function $(id){
   return typeof id === 'string'?document.getElementById(id):id;
}
window.onload = function(){
   var lis = $('notice-tit').getElementsByTagName('li');
   var divs = $('notice-con').getElementsByTagName('div');
   var index = 0;
   var timer = null;
   for(var i=0;i<lis.length;i++){
       lis[i].id = i;
       lis[i].onmouseenter = function(){
           clearInterval(timer);
           changeOption(this.id);
       };
       lis[i].onmouseleave = function(){
           timer = setInterval(autoPlay,2000);
       }
   }
   if(timer){
       clearInterval(timer);
       timer=null;
   } //clearInterval(timer);  ??有啥区别?为啥删了if(timer){}也没事??
   timer = setInterval(autoPlay,2000);
   function autoPlay() {
       index++;
       if (index >= lis.length) {
           index = 0;
       }
       changeOption(index);
   }

   function changeOption(currentIndex){
       for(var j=0;j<lis.length;j++){
           lis[j].className = '';
           divs[j].style.display = 'none';
       }
       lis[currentIndex].className = 'select';
       divs[currentIndex].style.display = 'block';
       index = currentIndex;
   }
};


一:  onmouseleave事件中,如果启动定时器不写timer=  的时候,鼠标离开它会自动乱切换,乱跳;具体代码:lis[i].onmouseleave = function(){
           setInterval(autoPlay,2000);
       } 

        为什么一定要写成 timer = setInterval(autoPlay,2000);?
二、鼠标放在内容标签里,标题标签还是自动切换,对用户体验不好,用户肯定想把鼠标放在内容上浏览内容,标题标签不切换,怎么解决?

第三点  if(timer){
       clearInterval(timer);
       timer=null;
   }  为什么不换成 clearInterval(timer);  ?
   我试了下为什么timer=null;不写也没影响?
   甚至这两种方法都不写也没影响啊,我试了下,并没有出现老师说的快速切换多个动画BUG,很正常的切换啊,怎么回事?

写回答 关注

1回答

  • 慕粉3856185
    2017-08-15 20:52:11
    已采纳

    1;因为你没有指定timer变量去承载这个方法,方法就找不到执行的规律

    2:可以直接获取内容,并遍历执行切换函数

    3:给clear=null;是为了让程序有更好的可读性,并从新赋值给clear,避免不必要的bug

    钱钱钱钱钱钱...

    非常感谢!

    2017-09-28 16:45:46

    共 1 条回复 >

Tab选项卡切换效果

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

65466 学习 · 573 问题

查看课程

相似问题