Javascript automatic slide + mouse slide area _ javascript skills

Js automatic slide + mouse Slide Area

<Style type = "text/css"> <! -- Body {text-align: center;} table {width: 500px; margin: 0px auto;} td {padding: 5px; font-weight: bold; text-align: center ;}. iborder {border: 1px #333333 solid; margin-top: 5px ;}. topnavon {background: # FFCC00; cursor: pointer ;}. topnavoff {background: #000000; color: # FFFFFF ;}--> </style> <script language = "javascript"> <! --/* News topic playback */var scrollNewsCt = 1; var pauseTime = 10*1000; var timer0; function hideAllClips () {for (I = 1; I <4; I ++) {var allClips = "newsbox" + I; var clipNum = "clipNum" + I; document. getElementById (allClips ). style. display = "none"; document. getElementById (clipNum ). className = "topnavoff" ;}} function clip_Switch (n) {var curClip = "newsbox" + n; var curClipNum = "clipNum" + n; hideAllClips (); document. getElementById (CurClip ). style. display = "block"; document. getElementById (curClipNum ). className = "topnavon"; scrollNewsCt = n;} function fwdScroll () {stopScroll (); clip_Switch (scrollNewsCt); scrollNewsCt + = 1; if (scrollNewsCt = 4) {scrollNewsCt = 1;} timer0 = setTimeout ("fwdScroll ()", pauseTime);} function stopScroll () {clearTimeout (timer0 );} /* Financial column playback */var scrollEcCt = 1; var EcpauseTime = 5*1000; var timerEc; function HideAllEcClips () {for (I = 1; I <6; I ++) {var allEcBoxs = "ecBox" + I; var ecNavNum = "ecNav" + I; document. getElementById (allEcBoxs ). style. display = "none"; document. getElementById (ecNavNum ). className = "topnavoff" ;}} function ecNavOn (n) {var curEcBox = "ecBox" + n; var curEcNavNum = "ecNav" + n; hideAllEcClips (); document. getElementById (curEcBox ). style. display = "block"; document. getElementById (curEcNavNum ). classnm E = "topnavon"; scrollEcCt = n;} function fecScroll () {stopEcScroll (); ecNavOn (scrollEcCt); scrollEcCt + = 1; if (scrollEcCt = 6) {scrollEcCt = 1;} timerEc = setTimeout ("fecScroll ()", EcpauseTime);} function stopEcScroll () {clearTimeout (timerEc );} --> script automatic sliding + mouse sliding area <p align = "center" style = "color: # FF0000; "> automatic jump in 10 seconds </p> <table width =" 100% "border =" 0 "cellspacing =" 0 "cellpadding =" 0 "class =" iborder "> <Tr> <td> <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0"> <tr> <td class = "topnavon" id = "clipNum1" onMouseOver = "clip_Switch (1 ); return false; "> hotspot focus </td> <td class =" topnavoff "id =" clipNum2 "onMouseOver =" clip_Switch (2); return false; "> graphic news </td> <td class =" topnavoff "id =" clipNum3 "onMouseOver =" clip_Switch (3); return false; "> Economic News </td> </tr> </table> <table width =" 100% "border =" 0 "cellsp Acing = "0" cellpadding = "0"> <tr> <td id = "newsbox1" style = "display: block; "> News 1 </td> </tr> <td id =" newsbox2 "style =" display: none; "> News 2 </td> </tr> <td id =" newsbox3 "style =" display: none; "> News 3 </td> </tr> </table> <script language =" javascript "> fwdScroll (); script <p align = "center" style = "color: # FF0000; "> automatic jump in 5 seconds </p> <table width =" 100% "border =" 0 "cellspacing =" 0 "cellpadding = "0" class = "iborder"> <tr> <td> <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0"> <tr> <td class = "topnavon" id = "ecNav1" onMouseOver = "ecNavOn (1 ); return false; "> Financial News </td> <td class =" topnavoff "id =" ecNav2 "onMouseOver =" ecNavOn (2); return false; "> Financial observation </td> <td class =" topnavoff "id =" ecNav3 "onMouseOver =" ecNavOn (3); return false; "> exclusive comment </td> <td class =" topnavoff "id =" ecNav4 "onMouseOver =" ec NavOn (4); return false; "> Xianggu online </td> <td class =" topnavoff "id =" ecNav5 "onMouseOver =" ecNavOn (5); return false; "> fortune ranking </td> </tr> </table> <table width =" 100% "border =" 0 "cellspacing =" 0 "cellpadding =" 0 "> <tr> <td id = "ecBox1" style = "display: block; "> Finance 1 </td> </tr> <td id =" ecBox2 "style =" display: none; "> Finance 2 </td> </tr> <td id =" ecBox3 "style =" display: none; "> Finance 3 </td> </tr> <td id =" ecBox4 "style = "Display: none;"> Finance 4 </td> </tr> <td id = "ecBox5" style = "display: none; "> Finance 5 </td> </tr> </table> <script language =" javascript "> fecScroll (); script! <P style = "font-size: 12px; text-align: left;"> although this works well, if one page has multiple such effects, it would be too stupid to write multiple JS functions for each part. In fact, only the control names are different. I am very grateful to the experts for improving them into a common function or class for calling. </P>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

Although the results are good, if a page has multiple such effects, it is too stupid to write multiple JS functions for each part. In fact, only the control names are different. I am very grateful to the experts for improving them into a common function or class for calling.

<Style type = "text/css"> <! -- Body {text-align: center;} table {width: 500px; margin: 0px auto;} td {padding: 5px; font-weight: bold; text-align: center ;}. iborder {border: 1px #333333 solid; margin-top: 5px ;}. topnavon {background: # FFCC00; cursor: pointer ;}. topnavoff {background: #000000; color: # FFFFFF ;}--> </style> <script type = "text/javascript">/* topic playback */var scrollNo = 1; var SetTime = 5*1000; var SetTimer; // clip: Tag ID, box: Layout ID, n: Current Slide, m: Slide Total number of functions hideAllClips (clip, box, n, m) {for (I = 1; I <(m + 1); I ++) {var allClips = box. toString () + I; var clipNum = clip. toString () + I; // alert ("hidden" + allClips); // if (I = n) break; document. getElementById (allClips ). style. display = "none"; document. getElementById (clipNum ). className = "topnavoff" ;}} function clip_Switch (clip, box, n, m) {var curClip = box. toString () + n; var curClipNum = clip. toString () + n; // alert ("current" + c UrClip); hideAllClips (clip, box, n, m); document. getElementById (curClip ). style. display = "block"; document. getElementById (curClipNum ). className = "topnavon"; scrollNo = n;} function fwdScroll (clip, box, m) {stopScroll (); clip_Switch (clip, box, scrollNo, m ); scrollNo + = 1; if (scrollNo = m + 1) {scrollNo = 1;} SetTimer = setTimeout ("fwdScroll ('" + clip + "', '"+ box +"', "+ m +") ", SetTime);} function stopScroll () {clearTimeou T (SetTimer );} --> script automatic sliding + mouse sliding area <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0" class = "iborder"> <tr> <td> <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0"> <tr> <td class = "topnavon" id = "clipNum1" onMouseOver = "clip_Switch ('clipnum ', 'newsbox', 1, 3); return false; "> hotspot focus </td> <td class =" topnavoff "id =" clipNum2 "onMouseOver =" clip_Switch ('clipnum ', 'newbox', 2, 3); ret Urn false; "> graphic news </td> <td class =" topnavoff "id =" clipNum3 "onMouseOver =" clip_Switch ('clipnum', 'newbox', 3, 3 ); return false; "> Economic News </td> </tr> </table> <table width =" 100% "border =" 0 "cellspacing =" 0 "cellpadding =" 0 "> <tr> <td id = "newsbox1" style = "display: block; "> News 1 </td> </tr> <td id =" newsbox2 "style =" display: none; "> News 2 </td> </tr> <td id =" newsbox3 "style =" display: none; "> News 3 </td> </tr> </tabl E> </td> </tr> </table> <script language = "javascript"> fwdScroll ('clipnum', 'newbox', 3 ); script <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0" class = "iborder"> <tr> <td> <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0"> <tr> <td class = "topnavon" id = "ecNav1" onMouseOver = "clip_Switch ('ecnav ', 'ecbox', 1, 5); return false; "> Financial News </td> <td class =" topnavoff "id =" ecNav2 "onMous EOver = "clip_Switch ('ecnav', 'ecbox',); return false; "> Financial observation </td> <td class =" topnavoff "id =" ecNav3 "onMouseOver =" clip_Switch ('ecnav', 'ecbox',); return false; "> exclusive comment </td> <td class =" topnavoff "id =" ecNav4 "onMouseOver =" clip_Switch ('ecnavv', 'ecbox',); return false; "> Xianggu online </td> <td class =" topnavoff "id =" ecNav5 "onMouseOver =" clip_Switch ('ecnav', 'ecbox', 5, 5); return false; "> fortune ranking </td> </tr> </table> <Table width = "100%" border = "0" cellspacing = "0" cellpadding = "0"> <tr> <td id = "ecBox1" style = "display: block; "> Finance 1 </td> </tr> <td id =" ecBox2 "style =" display: none; "> Finance 2 </td> </tr> <td id =" ecBox3 "style =" display: none; "> Finance 3 </td> </tr> <td id =" ecBox4 "style =" display: none; "> Finance 4 </td> </tr> <td id =" ecBox5 "style =" display: none; "> Finance 5 </td> </tr> </table> <script syntax AG E = "javascript"> fwdScroll ('ecnav', 'ecbox', 5 ); script <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0" class = "iborder"> <tr> <td> <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0"> <tr> <td class = "topnavon" id = "bcNav1" onMouseOver = "clip_Switch ('bcnav ', 'bcbox',); return false; "> Financial News </td> <td class =" topnavoff "id =" bcNav2 "onMouseOver =" clip_Switch ('bcnav ', 'bcbox', 2, 5); re Turn false; "> Financial observation </td> <td class =" topnavoff "id =" bcNav3 "onMouseOver =" clip_Switch ('bcnav', 'bcbox', 3,5 ); return false; "> exclusive comment </td> <td class =" topnavoff "id =" bcNav4 "onMouseOver =" clip_Switch ('bcnav', 'bcbox', 4,5 ); return false; "> Xianggu online </td> <td class =" topnavoff "id =" bcNav5 "onMouseOver =" clip_Switch ('bcnav', 'bcbox', 5, 5 ); return false; "> fortune ranking </td> </tr> </table> <table width =" 100% "border =" 0 "cellspacing = "0" cellpadding = "0"> <tr> <td id = "bcBox1" style = "display: block; "> Finance 1 </td> </tr> <td id =" bcBox2 "style =" display: none; "> Finance 2 </td> </tr> <td id =" bcBox3 "style =" display: none; "> Finance 3 </td> </tr> <td id =" bcBox4 "style =" display: none; "> Finance 4 </td> </tr> <td id =" bcBox5 "style =" display: none; "> Finance 5 </td> </tr> </table> <script language =" javascript "> fwdScroll ('bcnav ', 'bcbox', 5); Script! <P style = "font-size: 12px; text-align, the third item starts with the third item? In addition, only the last one is automatically played, and the previous one is dead, and the code is not refined enough. Please help the experts to continue the modification. </P>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

<Style type = "text/css"> <! -- Body {text-align: center;} table {width: 500px; margin: 0px auto;} td {padding: 5px; font-weight: bold; text-align: center ;}. iborder {border: 1px #333333 solid; margin-top: 5px ;}. topnavon {background: # FFCC00; cursor: pointer ;}. topnavoff {background: #000000; color: # FFFFFF ;}--> </style> <script type = "text/javascript">/* topic playback */var scrollNo = 0; var SetTime = 5*1000; var SetTimer; function hideAllClips (clip, box, m) {For (I = 1; I <(m + 1); I ++) {var allClips = box. toString () + I; var clipNum = clip. toString () + I; // alert ("hidden" + allClips); document. getElementById (allClips ). style. display = "none"; document. getElementById (clipNum ). className = "topnavoff" ;}} function clip_Switch (clip, box, no, m) {var curClip = box. toString () + no; var curClipNum = clip. toString () + no; // alert ("current" + curClip); hideAllClips (clip, box, m); document. getElem EntById (curClip ). style. display = "block"; document. getElementById (curClipNum ). className = "topnavon"; scrollNo = no;} function fwdScroll (clip, box, m) {stopScroll (); clip_Switch (scrollNo); scrollNo + = 0; if (scrollNo = m) {scrollNo = 0;} SetTimer = setTimeout ("fwdScroll (clip, box, m)", SetTime);} function stopScroll () {clearTimeout (SetTimer) ;}--> script auto sliding + mouse sliding area <table width = "100%" border = "0" cellspaci Ng = "0" cellpadding = "0" class = "iborder"> <tr> <td> <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0"> <tr> <td class = "topnavon" id = "clipNum1" onclick = "clip_Switch ('clipnum ', 'newsbox', 1, 3); return false; "> hotspot focus </td> <td class =" topnavoff "id =" clipNum2 "onclick =" clip_Switch ('clipnum ', 'newsbox', 2, 3); return false; "> graphic news </td> <td class =" topnavoff "id =" clipNum3 "onclick =" clip_Switch ('clipnum', 'Newbox', 3, 3); return false; "> Economic News </td> </tr> </table> <table width =" 100% "border =" 0 "cellspacing =" 0 "cellpadding =" 0 "> <tr> <td id = "newsbox1" style = "display: block; "> News 1 </td> </tr> <td id =" newsbox2 "style =" display: none; "> News 2 </td> </tr> <td id =" newsbox3 "style =" display: none; "> News 3 </td> </tr> </table> <script language =" javascript "> fwdScroll ('clipnum ', 'newbox', 3); scri Pt <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0" class = "iborder"> <tr> <td> <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0"> <tr> <td class = "topnavon" id = "ecNav1" onclick = "clip_Switch (' ecNav ', 'ecbox', 1, 5); return false; "> Financial News </td> <td class =" topnavoff "id =" ecNav2 "onclick =" clip_Switch ('ecnavv ', 'ecbox', 2, 5); return false; "> Financial observation </td> <td class =" topnavoff "id =" ecNav3" Onclick = "clip_Switch ('ecnav', 'ecbox', 3, 5); return false; "> exclusive comment </td> <td class =" topnavoff "id =" ecNav4 "onclick =" clip_Switch ('ecnavv', 'ecbox',); return false; "> Xianggu online </td> <td class =" topnavoff "id =" ecNav5 "onclick =" clip_Switch ('ecnav', 'ecbox', 5, 5); return false; "> fortune ranking </td> </tr> </table> <table width =" 100% "border =" 0 "cellspacing =" 0 "cellpadding =" 0 "> <tr> <td id = "ecBox1" style = "display: block; "> Finance 1 </Td> </tr> <td id = "ecBox2" style = "display: none; "> Finance 2 </td> </tr> <td id =" ecBox3 "style =" display: none; "> Finance 3 </td> </tr> <td id =" ecBox4 "style =" display: none; "> Finance 4 </td> </tr> <td id =" ecBox5 "style =" display: none; "> Finance 5 </td> </tr> </table> <script language =" javascript "> fwdScroll ('ecnav ', 'ecbox', 5); script! <P style = "font-size: 12px; text-align: left;"> it will not be automatically played after modification. </P>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]