Description
Set an identity number to 0, write a function that identifies +1 per second, performs a toggle effect, and then executes.
The identity is set to 0 when the identity exceeds the current tab length.
Turn off the timer when you move the mouse over the tab, and turn on the timer when the mouse is moved.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108-109 |
<! DOCTYPE html> <html> <head> <meta charset= "gb2312"/> <title> Untitled document </title> <style > body,ul,li{margin:0 padding:0; font:12px/1.5 Arial; ul,li{list-style:none; wrap{width:500px O }. hide{Display:none} #tab_t {height:25px; border-bottom:1px solid #ccc;} #tab_t li{float:left; width:80px px line-height:24px; margin:0 4px; Text-align:center; border:1px solid #ccc; Border-bottom:none; Background: #f5f5f5; Cursor:pointer} #tab_t. act{position:relative height:25px; margin-bottom:-1px background: #fff;} #tab_c {border:1px s Olid #ccc; Border-top:none; padding:20px; } </style> <script> window.onload = function () {tab ("tab_t", "Li", "Tab_c", "div", "onmouseover") function tab (TAB_T,TAB_T_TAG,TAB_C,TAG_C_TAG,EVT) {var tab_t = document.getElementById (tab_t); var tab_t_li = Tab_t.getelementsbytagname (Tab_t_tag); var tab_c = Document.g Etelementbyid (Tab_c); var tab_c_li = Tab_c.getelementsbytagname (tag_c_tag); var len = tab_t_li.length; var i=0; var timer = null; var num=0; For (i=0 i<len; i++) {tab_t_li[i].index = i; tab_t_li[i][evt] = function () {clearinterval (timer); num = this.index; tab _change ()} tab_t_li[i].onmouseout = function () {autoplay ();}} function Tab_change () {for (i=0; i<len; i++) {tab_t_li[i].classname = '; tab_c_li[i].classname = ' hide ';} tab_t_li[num ].classname = ' act '; Tab_c_li[num].classname = '; function AutoPlay () {timer = setinterval (function () {num++; if (Num>=len) num=0; Tab_change ();},1000);} autoplay (); } </script> </head> <body> <div class= "wrap" > <ul id= "tab_t" > <li class= "act" > select 1& lt;/li> <li> Select 2</li> <li> Select 3</li> <li> Select 4</li> </ul> <div id= "Tab_c" > <div> content 1</div> <div class= "Hide" > Content 2</div> <div class= "Hide" > Content 3</div> < div class= "Hide" > Content 4</div> </div> </div> </body> </html> |