钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱
2017-08-14 19:05
function $(id){
return typeof id === 'string'?document.getElementById(id):id;
}
window.onload = function(){
var lis = $('notice-tit').getElementsByTagName('li');
var divs = $('notice-con').getElementsByTagName('div');
var index = 0;
var timer = null;
for(var i=0;i<lis.length;i++){
lis[i].id = i;
lis[i].onmouseenter = function(){
clearInterval(timer);
changeOption(this.id);
};
lis[i].onmouseleave = function(){
timer = setInterval(autoPlay,2000);
}
}
if(timer){
clearInterval(timer);
timer=null;
} //clearInterval(timer); ??有啥区别?为啥删了if(timer){}也没事??
timer = setInterval(autoPlay,2000);
function autoPlay() {
index++;
if (index >= lis.length) {
index = 0;
}
changeOption(index);
}
function changeOption(currentIndex){
for(var j=0;j<lis.length;j++){
lis[j].className = '';
divs[j].style.display = 'none';
}
lis[currentIndex].className = 'select';
divs[currentIndex].style.display = 'block';
index = currentIndex;
}
};
一: onmouseleave事件中,如果启动定时器不写timer= 的时候,鼠标离开它会自动乱切换,乱跳;具体代码:lis[i].onmouseleave = function(){
setInterval(autoPlay,2000);
}
为什么一定要写成 timer = setInterval(autoPlay,2000);?
二、鼠标放在内容标签里,标题标签还是自动切换,对用户体验不好,用户肯定想把鼠标放在内容上浏览内容,标题标签不切换,怎么解决?
第三点 if(timer){
clearInterval(timer);
timer=null;
} 为什么不换成 clearInterval(timer); ?
我试了下为什么timer=null;不写也没影响?
甚至这两种方法都不写也没影响啊,我试了下,并没有出现老师说的快速切换多个动画BUG,很正常的切换啊,怎么回事?
1;因为你没有指定timer变量去承载这个方法,方法就找不到执行的规律
2:可以直接获取内容,并遍历执行切换函数
3:给clear=null;是为了让程序有更好的可读性,并从新赋值给clear,避免不必要的bug
Tab选项卡切换效果
65466 学习 · 573 问题
相似问题