猿问

选项卡的自动切换和手动延迟切换可以同时使用吗?

function $(id){
    return typeof id==='string'?document.getElementById(id):id;
}

window.onload=function(){
  // 标签的索引
  var index1=0;
  var timer1=null;

  var lis1=$('notice-tit').getElementsByTagName('li'),
      divs1=$('notice-con').getElementsByTagName('div');

  if(lis1.length!=divs1.length) return;

  // 遍历所有的页签
  for(var i=0;i<lis1.length;i++){
    lis1[i].id=i;
    lis1[i].onmouseover=function(){
      // 用that这个变量来引用当前滑过的li
      var that=this;
      // 如果存在准备执行的定时器,立刻清除,只有当前停留时间大于500ms时才开始执行
      if(timer1){
        clearTimeout(timer1);
        timer1=null;
      }
      // 延迟半秒执行
      timer1=window.setTimeout(function(){
        for(var j=0;j<lis1.length;j++){
          lis1[j].className='';
          divs1[j].style.display='none';
        }
        lis1[that.id].className='select';
        divs1[that.id].style.display='block';
      },500);
    }
  }
}

function $(id){
    return typeof id==='string'?document.getElementById(id):id;
}
window.onload=tab;

function tab(){
  // 当前高亮显示的页签的索引
  var index=0;
  var timer=null;

  // 获取所有的页签和要切换的内容
  var lis=$('new_tit').getElementsByTagName('li');
  var divs=$('new-con').getElementsByTagName('div');
  // 遍历每一个页签且给他们绑定事件
  for(var e=0;e<lis.length;e++){
    lis[e].id=e;
    lis[e].onmouseover=function(){
      clearInterval(timer);
      changeOption(this.id);
    }
    lis[e].onmouseout=function(){  
      timer=setInterval(autoPlay,2000);    
    }
  }
 
  if(timer){
    clearInterval(timer);
    timer=null;
  }
  // 添加定时器,改变当前高亮的索引
  timer=setInterval(autoPlay,2000);

  function autoPlay(){
      index++;
      if(index>=lis.length){
         index=0;
      }
      changeOption(index);
  }

  function changeOption(curIndex){
    for(var f=0;f<lis.length;f++){
       lis[f].className='';
       divs[f].style.display='none';
    }
    // 高亮显示当前页签
    lis[curIndex].className='select';
    divs[curIndex].style.display='block';
    index=curIndex;
  }
}

看如上代码,为什么两条代码不能同时执行呢?我是小白,问题过于简单,请大神多多原谅!

zigengziyun
浏览 1524回答 0
0回答
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答