为了账号安全,请及时绑定邮箱和手机立即绑定

如何让一个页面既有延迟切换,又有自动切换?

如何让一个页面既有延迟切换,又有自动切换?请高手多多指教!

正在回答

3 回答

什么意思? 一个页面里面有两个选项卡?

在一个页面里ID是唯一的。

两个选项卡你就要用两个不同的ID。

0 回复 有任何疑惑可以回复我~

不好意思,不是页面切换,是选项卡切换,在一个页面上用两种选项卡切换的js,只能执行其中一种,请大侠指教!

//延迟切换选项卡
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;
  }
}


0 回复 有任何疑惑可以回复我~

页面?切换? 定时刷新页面,是吗?


0 回复 有任何疑惑可以回复我~
#1

zigengziyun 提问者

不好意思,不是页面切换,是选项卡切换,在一个页面上用两种选项卡切换的js,只能执行其中一种,请大侠指教!我小白一个!
2014-12-30 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

如何让一个页面既有延迟切换,又有自动切换?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信