From Javascript's Kiss

两个需求:第一,优化自动切换的性能,记录上一个li的索引,在将要显示的当前li隐藏掉上一个,显示当前的,避免使用循环做判断;第二,鼠标移动到内容ul的时候,停止切换,并且记录setInterval已经执行的时间,在mouseout的时候在接下来的时间里继续执行轮询。

查看源码

;(function(){
   var addListener = function(el, type, fn){
      if (el.addEventListener) {
         el.addEventListener(type, fn, false);
      }
      else if (el.attachEvent) {
         el.attachEvent("on" + type, function(e){
            fn.call(el, e);
         });
      }
   }
   
   var controls = document.getElementById("control").getElementsByTagName("li"), 
       un_controls = document.getElementById("under_control").getElementsByTagName("li"), 
	   un_control = document.getElementById("under_control"), 
	   cur_t = 0, //记录每次轮询的秒时间
       out_t = 0, //记录每次鼠标移出内容ul的秒时间
       cur_index = 0, //当前轮询的索引
       interval = 0, timeout = 0;
   
   for (var i = 0, l = controls.length; i < l; i++) {
      (function(cur){
         addListener(controls[cur], "click", function(e){
            un_controls[cur_index].className = "";
            un_controls[cur].className = "active";
            this.className = "hightlight";
            controls[cur_index].className = "";
            cur_index = cur;
         });
      })(i);
   }
   
   var _tab = function(){
      var l = un_controls.length;
      var l2 = controls.length;
      cur_index++;
      if (cur_index === l) {
         cur_index = 0;
      }
      un_controls[cur_index].className = "active";
      controls[cur_index].className = "hightlight";
      un_controls[cur_index - 1 >= 0 ? cur_index - 1 : l - 1].className = "";
      controls[cur_index - 1 >= 0 ? cur_index - 1 : l2 - 1].className = "";
   }
   
   var scrollTab = function(){
      interval = setInterval(function(){
         cur_t = (new Date()).getTime();
         _tab();
      }, 5000);
   }
   
   scrollTab(); //执行默认的切换定时器
   addListener(un_control, "mouseover", function(e){
      clearInterval(interval);//清空掉默认的setInterval定时器
      clearTimeout(timeout); //清空掉上一轮执行的setTimeout定时器
   });
   
   addListener(un_control, "mouseout", function(e){
      out_t = (new Date()).getTime();
      timeout = setTimeout(function(){
         _tab();
         scrollTab();
      }, (5 - Math.floor((out_t - cur_t) / 1000) % 5) * 1000);
   });
})();