Javascript automatic slide + mouse slide area _ javascript skills

Source: Internet
Author: User
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]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.