課程
/前端開發(fā)
/JavaScript
/Tab選項卡切換效果
如何讓一個頁面既有延遲切換,又有自動切換?請高手多多指教!
2014-12-30
源自:Tab選項卡切換效果 3-2
正在回答
什么意思? 一個頁面里面有兩個選項卡?
在一個頁面里ID是唯一的。
兩個選項卡你就要用兩個不同的ID。
不好意思,不是頁面切換,是選項卡切換,在一個頁面上用兩種選項卡切換的js,只能執(zhí)行其中一種,請大俠指教!
//延遲切換選項卡 function?$(id){ ????return?typeof?id==='string'?document.getElementById(id):id; } window.onload=function(){ ??//?標(biāo)簽的索引 ??var?index1=0; ??var?timer1=null; ??var?lis1=$('notice-tit').getElementsByTagName('li'), ??????divs1=$('notice-con').getElementsByTagName('div'); ??if(lis1.length!=divs1.length)?return; ??//?遍歷所有的頁簽 ??for(var?i=0;i<lis1.length;i++){ ????lis1[i].id=i; ????lis1[i].onmouseover=function(){ ??????//?用that這個變量來引用當(dāng)前滑過的li ??????var?that=this; ??????//?如果存在準備執(zhí)行的定時器,立刻清除,只有當(dāng)前停留時間大于500ms時才開始執(zhí)行 ??????if(timer1){ ????????clearTimeout(timer1); ????????timer1=null; ??????} ??????//?延遲半秒執(zhí)行 ??????timer1=window.setTimeout(function(){ ????????for(var?j=0;j<lis1.length;j++){ ??????????lis1[j].className=''; ??????????divs1[j].style.display='none'; ????????} ????????lis1[that.id].className='select'; ????????divs1[that.id].style.display='block'; ??????},500); ????} ??} } //自動切換選項卡 function?$(id){ ????return?typeof?id==='string'?document.getElementById(id):id; } window.onload=tab; function?tab(){ ??//?當(dāng)前高亮顯示的頁簽的索引 ??var?index=0; ??var?timer=null; ??//?獲取所有的頁簽和要切換的內(nèi)容 ??var?lis=$('new_tit').getElementsByTagName('li'); ??var?divs=$('new-con').getElementsByTagName('div'); ??//?遍歷每一個頁簽且給他們綁定事件 ??for(var?e=0;e<lis.length;e++){ ????lis[e].id=e; ????lis[e].onmouseover=function(){ ??????clearInterval(timer); ??????changeOption(this.id); ????} ????lis[e].onmouseout=function(){?? ??????timer=setInterval(autoPlay,2000);???? ????} ??} ?? ??if(timer){ ????clearInterval(timer); ????timer=null; ??}? ??//?添加定時器,改變當(dāng)前高亮的索引 ??timer=setInterval(autoPlay,2000); ??function?autoPlay(){ ??????index++; ??????if(index>=lis.length){ ?????????index=0; ??????} ??????changeOption(index); ??} ??function?changeOption(curIndex){ ????for(var?f=0;f<lis.length;f++){ ???????lis[f].className=''; ???????divs[f].style.display='none'; ????} ????//?高亮顯示當(dāng)前頁簽 ????lis[curIndex].className='select'; ????divs[curIndex].style.display='block'; ????index=curIndex; ??} }
頁面?切換? 定時刷新頁面,是嗎?
zigengziyun 提問者
舉報
本課程詳細介紹網(wǎng)頁頁面中最流行常用的tab切換效果
1 回答如何讓一個頁面既有延遲切換,又有自動切換?
2 回答Jquery的延遲切換和自動切換
2 回答Tab選項卡切換 延遲效果
1 回答onmouseout后圖片切換延遲變長,為什么?
1 回答手動切換時加入延時,并沒有效果,能幫我看看如何寫嗎?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2015-01-05
什么意思? 一個頁面里面有兩個選項卡?
在一個頁面里ID是唯一的。
兩個選項卡你就要用兩個不同的ID。
2014-12-30
不好意思,不是頁面切換,是選項卡切換,在一個頁面上用兩種選項卡切換的js,只能執(zhí)行其中一種,請大俠指教!
2014-12-30
頁面?切換? 定時刷新頁面,是嗎?