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);
});
})();