js自動滑動+滑鼠滑動地區_javascript技巧

<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"> <!-- /*新聞欄目播放*/ 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); } /*財經欄目播放*/ 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).className="topnavon"; scrollEcCt=n; } function fecScroll() { stopEcScroll(); ecNavOn(scrollEcCt); scrollEcCt+=1; if (scrollEcCt==6) { scrollEcCt=1; } timerEc=setTimeout("fecScroll()",EcpauseTime); } function stopEcScroll() { clearTimeout(timerEc); } --> </script> <h1 align="center" >自動滑動+滑鼠滑動地區</h1> <div align="center" >10秒自動跳轉</div> <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;">熱點聚焦</td> <td class="topnavoff" id="clipNum2" onMouseOver="clip_Switch(2); return false;">圖說新聞</td> <td class="topnavoff" id="clipNum3" onMouseOver="clip_Switch(3); return false;">經濟新聞</td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="newsbox1" ><h1>新聞1</h1></td> </tr> <tr> <td id="newsbox2" ><h1>新聞2</h1></td> </tr> <tr> <td id="newsbox3" ><h1>新聞3</h1></td> </tr> </table> </td> </tr> </table> <script language="javascript">fwdScroll();</script> <div align="center" >5秒自動跳轉</div> <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;">財經要聞</td> <td class="topnavoff" id="ecNav2" onMouseOver="ecNavOn(2); return false;">財經觀察</td> <td class="topnavoff" id="ecNav3" onMouseOver="ecNavOn(3); return false;">獨家點評</td> <td class="topnavoff" id="ecNav4" onMouseOver="ecNavOn(4); return false;">湘股線上</td> <td class="topnavoff" id="ecNav5" onMouseOver="ecNavOn(5); return false;">財富熱門排行榜</td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="ecBox1" ><h1>財經1</h1></td> </tr> <tr> <td id="ecBox2" ><h1>財經2</h1></td> </tr> <tr> <td id="ecBox3" ><h1>財經3</h1></td> </tr> <tr> <td id="ecBox4" ><h1>財經4</h1></td> </tr> <tr> <td id="ecBox5" ><h1>財經5</h1></td> </tr> </table> </td> </tr> </table> <script language="javascript">fecScroll();</script> <h1 align="center" >！</h1> <p > 這個雖然效果不錯，但是如果一個頁面有多個這樣的效果，就要針對每一部分寫多個JS函數，那就太蠢了。其實只有控制項名稱不同而已，<span >求高手改進成一個通用函數或者類來調用</span>，不勝感激。 </p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

這個雖然效果不錯，但是如果一個頁面有多個這樣的效果，就要針對每一部分寫多個JS函數，那就太蠢了。其實只有控制項名稱不同而已，求高手改進成一個通用函數或者類來調用，不勝感激

<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"> /*欄目播放*/ var scrollNo=1; var SetTime=5*1000; var SetTimer; //clip：標籤ID，box：版面ID，n：當前滑動項，m：滑動總數 function hideAllClips(clip,box,n,m) { for (i=1; i<(m+1); i++){ var allClips=box.toString()+i; var clipNum=clip.toString()+i; //alert("隱藏"+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("當前"+curClip); 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() { clearTimeout(SetTimer); } --> </script> <h1 align="center" >自動滑動+滑鼠滑動地區</h1> <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;">熱點聚焦</td> <td class="topnavoff" id="clipNum2" onMouseOver="clip_Switch('clipNum','newsbox',2,3); return false;">圖說新聞</td> <td class="topnavoff" id="clipNum3" onMouseOver="clip_Switch('clipNum','newsbox',3,3); return false;">經濟新聞</td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="newsbox1" ><h1>新聞1</h1></td> </tr> <tr> <td id="newsbox2" ><h1>新聞2</h1></td> </tr> <tr> <td id="newsbox3" ><h1>新聞3</h1></td> </tr> </table> </td> </tr> </table> <script language="javascript">fwdScroll('clipNum','newsbox',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;">財經要聞</td> <td class="topnavoff" id="ecNav2" onMouseOver="clip_Switch('ecNav','ecBox',2,5); return false;">財經觀察</td> <td class="topnavoff" id="ecNav3" onMouseOver="clip_Switch('ecNav','ecBox',3,5); return false;">獨家點評</td> <td class="topnavoff" id="ecNav4" onMouseOver="clip_Switch('ecNav','ecBox',4,5); return false;">湘股線上</td> <td class="topnavoff" id="ecNav5" onMouseOver="clip_Switch('ecNav','ecBox',5,5); return false;">財富熱門排行榜</td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="ecBox1" ><h1>財經1</h1></td> </tr> <tr> <td id="ecBox2" ><h1>財經2</h1></td> </tr> <tr> <td id="ecBox3" ><h1>財經3</h1></td> </tr> <tr> <td id="ecBox4" ><h1>財經4</h1></td> </tr> <tr> <td id="ecBox5" ><h1>財經5</h1></td> </tr> </table> </td> </tr> </table> <script language="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',1,5); return false;">財經要聞</td> <td class="topnavoff" id="bcNav2" onMouseOver="clip_Switch('bcNav','bcBox',2,5); return false;">財經觀察</td> <td class="topnavoff" id="bcNav3" onMouseOver="clip_Switch('bcNav','bcBox',3,5); return false;">獨家點評</td> <td class="topnavoff" id="bcNav4" onMouseOver="clip_Switch('bcNav','bcBox',4,5); return false;">湘股線上</td> <td class="topnavoff" id="bcNav5" onMouseOver="clip_Switch('bcNav','bcBox',5,5); return false;">財富熱門排行榜</td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="bcBox1" ><h1>財經1</h1></td> </tr> <tr> <td id="bcBox2" ><h1>財經2</h1></td> </tr> <tr> <td id="bcBox3" ><h1>財經3</h1></td> </tr> <tr> <td id="bcBox4" ><h1>財經4</h1></td> </tr> <tr> <td id="bcBox5" ><h1>財經5</h1></td> </tr> </table> </td> </tr> </table> <script language="javascript">fwdScroll('bcNav','bcBox',5);</script> <h1 align="center" >！</h1> <p > 改了下，能夠實現了，但是第二個為什麼會預設第二個項開始,第三個從第三項開始呢？而且只有最後一個自動播放，前面的都死了；並且代碼還是不夠精練，請高手幫忙繼續修改。 </p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

<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"> /*欄目播放*/ 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("隱藏"+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("當前"+curClip); hideAllClips(clip,box,m); document.getElementById(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> <h1 align="center" >自動滑動+滑鼠滑動地區</h1> <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" onclick="clip_Switch('clipNum','newsbox',1,3); return false;">熱點聚焦</td> <td class="topnavoff" id="clipNum2" onclick="clip_Switch('clipNum','newsbox',2,3); return false;">圖說新聞</td> <td class="topnavoff" id="clipNum3" onclick="clip_Switch('clipNum','newsbox',3,3); return false;">經濟新聞</td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="newsbox1" ><h1>新聞1</h1></td> </tr> <tr> <td id="newsbox2" ><h1>新聞2</h1></td> </tr> <tr> <td id="newsbox3" ><h1>新聞3</h1></td> </tr> </table> </td> </tr> </table> <script language="javascript">fwdScroll('clipNum','newsbox',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" onclick="clip_Switch('ecNav','ecBox',1,5); return false;">財經要聞</td> <td class="topnavoff" id="ecNav2" onclick="clip_Switch('ecNav','ecBox',2,5); return false;">財經觀察</td> <td class="topnavoff" id="ecNav3" onclick="clip_Switch('ecNav','ecBox',3,5); return false;">獨家點評</td> <td class="topnavoff" id="ecNav4" onclick="clip_Switch('ecNav','ecBox',4,5); return false;">湘股線上</td> <td class="topnavoff" id="ecNav5" onclick="clip_Switch('ecNav','ecBox',5,5); return false;">財富熱門排行榜</td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="ecBox1" ><h1>財經1</h1></td> </tr> <tr> <td id="ecBox2" ><h1>財經2</h1></td> </tr> <tr> <td id="ecBox3" ><h1>財經3</h1></td> </tr> <tr> <td id="ecBox4" ><h1>財經4</h1></td> </tr> <tr> <td id="ecBox5" ><h1>財經5</h1></td> </tr> </table> </td> </tr> </table> <script language="javascript">fwdScroll('ecNav','ecBox',5);</script> <h1 align="center" >！</h1> <p > <h1 align="center" >改過以後不自動播放了。</h1> </p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]