接上篇(用js寫簡單選項卡),這篇就實現可以自動切換的切換效果,用這種效果就可以做簡單的焦點圖了。
說明:設定乙個標識數字置為0,寫乙個每過幾秒標識+1,執行切換效果的函式,然後執行。
當標識超過當前選項卡長度讓標識置為0。
在滑鼠移到選項卡的時候關閉定時器,滑鼠移走的時候開啟定時器。
doctype html
>
<
html
>
<
head
>
<
meta
charset
="gb2312"
/>
<
title
>無標題文件
title
>
<
style
>
body,ul,li
ul,li
.wrap
.hide
#tab_t
#tab_t li
#tab_t .act
#tab_c
style
>
<
script
>
window.onload
=function
()tab_t_li[i].onmouseout
=function()}
function
tab_change()
tab_t_li[num].classname ='
act'
;tab_c_li[num].classname =''
;}function
autoplay(),
1000);}
autoplay();}}
script
>
head
>
<
body
>
<
div
class
="wrap"
>
<
ul id
="tab_t"
>
<
li class
="act"
>選擇1
li>
<
li>選擇2
li>
<
li>選擇3
li>
<
li>選擇4
li>
ul>
<
div
id="tab_c"
>
<
div>內容1
div>
<
div
class
="hide"
>內容2
div>
<
div
class
="hide"
>內容3
div>
<
div
class
="hide"
>內容4
div>
div>
div>
body
>
html
>
用js寫簡單選項卡
如圖,最簡單的純粹的選項卡 第一步,當然是先寫html 和css樣式 doctype html html head meta charset gb2312 title 無標題文件 title style body,ul,li ul,li wrap hide tab t tab t li tab t ...
原生JS寫選項卡
封裝兩個方法deleteclass addclass 給元素新增classname function addclass elem,value else 給元素刪除classname function deleteclass elem,value html id tabs id lists class...
用JS實現簡易的Tab選項卡輪播
首先我這裡用的是ul li標籤裝的由於是沒有什麼好看的我就用了顏色來代替 html 如下 然後用index記錄輪播的頻數 var index 0 function autoplay seton2 index 之後獲取到html裡面設定的id首先設定按鈕的高亮與tab簡易輪播 function set...