Tab选项卡切换效果_技术笔记

wshyzx 2017-03-05

5:45s老师清除定时器再看的时候把console.log()去掉了加上的话感觉和不清定时器一样啊移动快的话还是会一个元素加好几个定时器 onmouseover :当鼠标浮动到本身和子元素时候都会触发建议使用 onmouseenter onmouseleave替换这个只在元素本身触发该方法可大量减少重复但不能完全消除

0赞 · 0采集
DCraig 2017-01-21

在设置计时器的时候一定记得清除计时器，在自动播放的时候回调函数的参数等于现在鼠标所在地方的值

0赞 · 1采集
子木0802 2016-04-01

function $(id){ return typeof id==='string'?document.getElementById(id):id; } window.onload=function(){ var timer=null; var index=0; //遍历选项和内容 var tit=$('notice-tit').getElementsByTagName('li'); var div=$('notice-con').getElementsByTagName('div'); //高亮显示 function changeTab(d){ for(var j=0;j<tit.length;j++){ tit[j].className=''; div[j].style.display='none'; } // alert(d); tit[d].className='select'; div[d].style.display='block'; } //自动切换 function autoPlay(index){ timer=setInterval(function(){ index++; if(index>=tit.length){ index=0; } changeTab(index); },500) } //手动切换 autoPlay(index); for(var i=0;i<tit.length;i++){ tit[i].id=i; // alert(tit.length); tit[i].onmouseover=function(){ clearInterval(timer); changeTab(this.id); } tit[i].onmouseout=function(){ autoPlay(this.id); }; } }

0赞 · 1采集
黄枪枪 2015-12-22

我发现老师的if(timer){clearInterval(timer);timer=null;}是放在window.onload事件中的..其实只在浏览器加载完成后执行了一次...而在最后她把console.log(curIndex)语句给删掉后做测试,当然工作台不会打印curIndex的值了.老师你太糊弄事啦!!! 自己做了测试,发现多次打印curIndex的原因有两个:1.当鼠标滑动到li中的a标签上后,a的onmouseover和onmouseout事件会进行冒泡而触发了li的onmouseover和onmouseout事件,而使工作台打印了curIndex的值;2.当鼠标从li滑动入li自己内部的a标签时,触发了li的onmouseout,同理鼠标移出a时,触发了li的onmouseover. 最后要说明一下,打印curIndex的值的最直接原因是调用了changeOption()函数{老师吧console.log(curIndex);放在了这个函数内}.当lis[i].onmouseover触发时,首先就已经清理了定时器{clearInterval(timer);}直到lis[i].onmouseout事件触发,在此之间调用函数changeOption()和定时器有毛关系啊!!!所以此时并没有定时器在后台运行,不会出现老师所说的定时器开得太多而影响浏览器工作的情况. 老师在程序中所加的if(timer){clearInterval(timer);timer=null;}也只是针对定时器timer的判断与关闭.setInterval也不可能存在自我调用(即:timer=setInterval(aaa,1500);而函数aaa中又存在timer=setInterval(aaa,1500);这样函数会无限循环的自我调用而使浏览器崩溃. 不过可以timer111=setInterval(aaa,1500);函数aaa中又存在timer222=setInterval(bbb,1500);timer111与timer222为不同的定时器,aaa与bbb为不同的函数,这样不会出现死循环的自我调用),所以老师的if(timer){clearInterval(timer);timer=null;}只能关闭之前可能已经被用了的timer定时器.

2赞 · 5采集
记得喝水 2015-12-08

1.解决选项卡标题在onmouseover后，不安顺序切换的bug. function changeOption(curIndex){ for(var j=0;j<titL.length;j++){ titL[j].className=""; content[j].className="content"; } // 高亮显示当前标题栏 titL[curIndex].className="select"; content[curIndex].className="show"; index=curIndex;//解决选项卡标题在onmouseover后，不安顺序切换的bug. } 2.bug2：解决快速onmouseover时存在的多次调用定时setInterval()存在的bug. 在在执行onmouseout过后添加：if(timer){clearInterval(timer);timer=null;}

1赞 · 1采集
kwangroy 2015-11-20

if(timer) 判断当前有等待执行的定时器，有就关闭，再去执行接下来要执行的定时动作

截图
0赞 · 0采集
guangying 2015-11-05

清除bug： 1、解决滑动切换与自动切换不衔接问题，即将滑动切换后当前显示的标识传递给自动切换；index=curIndex 2、解决由于定时器的延迟导致的自动切换与滑动切换间跳动的问题，即：在每次调用定时器前都将原有的定时器延迟清除。if(timer){ clearInterval() }

0赞 · 2采集
縌麟 2015-10-22

清除bug： 1、解决滑动切换与自动切换不衔接问题，即将滑动切换后当前显示的标识传递给自动切换；index=curIndex 2、解决由于定时器的延迟导致的自动切换与滑动切换间跳动的问题，即：在每次调用定时器前都将原有的定时器延迟清除。if(timer){ clearInterval() }

0赞 · 0采集
Erickgouzi 2015-10-20

封装函数

截图
0赞 · 0采集
xiaoyazi_IT 2015-10-07

清除bug,适时调用参数

0赞 · 0采集
叮叮咚锵 2015-10-07

function $(id){ return typeof id==='string'?document.getElementById(id):id; } window.onload=tab; function tab(){ //当前高亮显示的页签的索引 var index=0; var timer=null; var tit=$('tab_tit').getElementsByTagName('li'), con=$('tab_con').getElementsByTagName('div'); //遍历每一个页签且给他们绑定事件 for(var i=0;i<tit.length;i++){ tit[i].id=i; tit[i].onmouseover=function(){ clearInterval(timer); changeOption(this.id); } tit[i].onmouseout=function(){ timer=setInterval(autoPlay,2000); } } if(timer){ clearInterval(timer); timer=null; } //添加定时器，改变当前索引 timer=setInterval(autoPlay,2000); function autoPlay(){ index++; if(index>=tit.length){ index=0; } changeOption(index); } function changeOption(curindex){ for(var j=0;j<tit.length;j++){ tit[j].className=''; con[j].style.display='none'; } tit[curindex].className='select'; con[curindex].style.display='block'; index=curindex; } }

截图
0赞 · 0采集
叮叮咚锵 2015-10-07

清除bug： 1、解决滑动切换与自动切换不衔接问题，即将滑动切换后当前显示的标识传递给自动切换；index=curIndex 2、解决由于定时器的延迟导致的自动切换与滑动切换间跳动的问题，即：在每次调用定时器前都将原有的定时器延迟清除。if(timer){ clearInterval(timer); timer=null; }

截图
0赞 · 0采集
qq_蓝心_0 2015-09-15

1、在changeOption()的最后添加一行代码解决继续播放时下一个选项卡index不对的BUG：index = currentIndex； 2、如果划过太快，会有很多个定时器，所以要在设置定时器之前先清除一下定时器： if(timer){ clearInterval(timer); timer=null; //如果有等待的定时器，先清除。 }

0赞 · 0采集
Kry星晨碎月stal 2015-08-11

“划过四次开了四个定时器”但是每次划到一个页签的时候都有清除定时器啊？为什么啊。。。没听懂...

截图
0赞 · 0采集
sweetlife哦耶 2015-08-08

清除bug： 1、解决滑动切换与自动切换不衔接问题，即将滑动切换后当前显示的标识传递给自动切换；index=curIndex 2、解决由于定时器的延迟导致的自动切换与滑动切换间跳动的问题，即：在每次调用定时器前都将原有的定时器延迟清除。if(timer){ clearInterval(timer); timer=null; }

0赞 · 1采集
sweetlife哦耶 2015-08-08

一、鼠标快速切换的时候，可能回重起很多定时器，可能会造成系统变得很卡，所以再添加定时器之前，要先清除有等待的定时器，即：if(timer) {clearTimerval(timer); timer=null;}

0赞 · 0采集
小光头 2015-08-06

清除bug： 1、解决滑动切换与自动切换不衔接问题，即将滑动切换后当前显示的标识传递给自动切换；index=curIndex 2、解决由于定时器的延迟导致的自动切换与滑动切换间跳动的问题，即：在每次调用定时器前都将原有的定时器延迟清除。if(timer){ clearInterval() }

0赞 · 0采集
LearnSth 2015-07-26

在添加定时器之前，做一次清除。 PS：清除代码添加的位置貌似不对，添加到这个位置，执行一次就拉倒了。。。是不是应该添加到 onmouseout那个代码里？

截图
2赞 · 0采集
庚庚 2015-06-19

函数的封装，如果有大量代码非诚相近，只是参数不同，那么就可以使用该函数的封装。定时器的判定。if(timer){ clearIntervai(timer); timer=null; }

0赞 · 0采集
More_imooc 2015-04-14

添加定时器前先清除已有定时器

0赞 · 0采集
Moirai 2015-03-18

@@--Tab选项卡切换效果--3-3 bug解决及定时器优化 1、在changeOption()的最后添加一行代码解决继续播放时下一个选项卡index不对的BUG：index = currentIndex； 2、如果划过太快，会有很多个定时器，所以要在设置定时器之前先清除一下定时器： if(timer){ clearInterval(timer); timer=null; //如果有等待的定时器，先清除。 }

0赞 · 0采集
orangecat 2015-03-11

1、在changeOption()的最后添加一行代码解决继续播放时下一个选项卡index不对的BUG：index = currentIndex； 2、如果划过太快，会有很多个定时器，所以要在设置定时器之前先清除一下定时器： if(timer){ clearInterval(timer); }

0赞 · 0采集
tombi 2015-03-01

我做出来的效果还有一个bug，就是划出以后，后面的切换时间会变得特别快。不知道为什么

0赞 · 0采集
3060202219 2015-02-05

bug好像没有完全解决……

0赞 · 0采集
hekie 2015-02-03

1、在changeOption()的最后添加一行代码解决继续播放时下一个选项卡index不对的BUG：index = currentIndex； 2、如果划过太快，会有很多个定时器，所以要在设置定时器之前先清除一下定时器： if(timer){ clearInterval(timer); }

0赞 · 0采集
木大人 2015-01-10

重复的代码可以考虑封装到同一个函数，然后调用。代码有点小区别可以考虑传参。

2赞 · 0采集
一淇 2014-11-12

清除bug： 1、解决滑动切换与自动切换不衔接问题，即将滑动切换后当前显示的标识传递给自动切换； 2、解决由于定时器的延迟导致的自动切换与滑动切换间跳动的问题，即：在每次调用定时器前都将原有的定时器延迟清除。

截图
0赞 · 5采集
蚊子漫布 2014-08-26

将重复的代码块封装为一个函数，供不同位置调用

0赞 · 0采集

数据加载中...