用js寫簡單選項卡 加 自動切換效果

2022-03-27 04:32:58 字數 1613 閱讀 7001

接上篇(用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...