选项卡切换效果总结

Tab选项卡切换效果
切换类型：划过切换、点击切换、延迟切换、自动切换

划过切换：

window.οnlοad=function(){
	var li=document.getElementsByTagName("li");
	var nr=document.getElementsByName("content");
	for(var i=0;i<li.length;i++){
		li[i].index=i;
		li[i].οnmοuseοver=function(){
			for(var j=0;j<nr.length;j++){
				nr[j].style.display="none";				
			}
			nr[this.index].style.display="block";
		};
	}
}

点击切换：

window.οnlοad=function(){
		
      // 将所有点击的标题和要显示隐藏的列表取出来
      var menu=document.getElementById('menu'),
      p=menu.getElementsByTagName('p');
      ul=menu.getElementsByTagName('ul');
     // 遍历所有要点击的标题且给它们添加索引及绑定事件     
     if (p.length==ul.length) {
     	for(var i=0;i<p.length;i++){
     		p[i].id=i;
	     	p[i].οnclick=function(){
	     		//取点击的标题上的索引属性，根据该索引找到对应的列表
	     		// 判断该列表，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来
	     		if (ul[this.id].style.display=='block') {
	     			ul[this.id].style.display='none';
	     		}else{
	     			ul[this.id].style.display='block';
	     		}
	     	}
     	}
     }  

}

延迟切换：

setTimeout延迟时间
在执行时，是在载入后延迟指定时间后，去执行一次表达式，仅执行一次
serInterval交互时间
在执行时，它从载入后，每隔指定的时间就执行一次表达式，下边显示的是这一种：

window.οnlοad=function(){
	    var send=document.getElementById('send'),
	        times=60,
	        timer=null;
	    send.οnclick=function(){
	      // 计时开始 
          timer=setInterval(autoCount,1000);       
	    }
        function autoCount(){
            send.value = times + "秒后重试";
            send.disabled = "false";
            times--;  
          
            if(times < 0){
                clearInterval(timer); 
                autoStop();
            }
        }
        
        function autoStop(){
            send.value = "发送验证码";
            send.removeAttribute("disabled");
            times = 60;
        }
}

自动切换：

window.onload = function() {
  var wrap = document.getElementById('wrap'),
    img = document.getElementById('pic').getElementsByTagName('li'),
    list = document.getElementById('list').getElementsByTagName('li'),
    index = 0,
    timer = null;
  // 定义并调用自动播放函数
  timer = setInterval(autoPlay, 2000);

  function autoPlay() {
    play(index);
    index++;
    if (index >= list.length) {
      index = 0;
    }
  }
  // 定义图片切换函数
  function play(curIndex) {
    for (var i = 0; i < list.length; i++) {
      list[i].className = '';
      img[i].style.display = 'none';
    }
    list[curIndex].className = 'on';
    img[curIndex].style.display = 'block';
    index = curIndex;
  }
  // 鼠标划过整个容器时停止自动播放
  wrap.onmouseover = function() {
    clearInterval(timer);
  };
  // 鼠标离开整个容器时继续播放至下一张
  wrap.onmouseout = function() {
    timer = setInterval(autoPlay, 2000);
  };
  // 遍历所有数字导航实现划过切换至对应的图片
  for (var i = 0; i < list.length; i++) {
    list[i].id = i;
    list[i].onmouseover = function() {
      play(this.id);
    };
  }
};

高亮：li.select，class="select"

添加索引：titles[i].id=i;

setTimeout是window属性，其内this指window。若要使用原this,需要赋值

Tab自动切换 清空定时器，防止反应不灵敏