问答详情
源自:3-2 加入手动切换功能及代码优化

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

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

提问者:zigengziyun 2014-12-30 11:41

个回答

  • YamDestiny
    2015-01-05 12:19:14

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

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

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

  • zigengziyun
    2014-12-30 17:26:43

    不好意思,不是页面切换,是选项卡切换,在一个页面上用两种选项卡切换的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;
      }
    }


  • 赵小布
    2014-12-30 16:24:31

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