欢迎来到代码驿站！

JavaScript代码

当前位置：首页 > 网页前端 > JavaScript代码

js自动滑动+鼠标滑动区域

时间：2021-04-19 08:07:58|栏目：JavaScript代码|点击：次

<style type="text/css">  </style> <script language="javascript">  </script> <h1 align="center" style="color:#FF0000;">自动滑动+鼠标滑动区域</h1> <div align="center" style="color:#FF0000;">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" style="display:block;"><h1>新闻1</h1></td>   </tr>   <tr>     <td id="newsbox2" style="display:none;"><h1>新闻2</h1></td>   </tr>   <tr>     <td id="newsbox3" style="display:none;"><h1>新闻3</h1></td>   </tr> </table>     </td>   </tr> </table> <script language="javascript">fwdScroll();</script>  <div align="center" style="color:#FF0000;">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" style="display:block;"><h1>财经1</h1></td>   </tr>   <tr>     <td id="ecBox2" style="display:none;"><h1>财经2</h1></td>   </tr>   <tr>     <td id="ecBox3" style="display:none;"><h1>财经3</h1></td>   </tr>   <tr>     <td id="ecBox4" style="display:none;"><h1>财经4</h1></td>   </tr>   <tr>     <td id="ecBox5" style="display:none;"><h1>财经5</h1></td>   </tr> </table>     </td>   </tr> </table> <script language="javascript">fecScroll();</script> <h1 align="center" style="color:#FFCC00; font-size:150px; margin:0px auto;">！</h1> <p style="font-size:12px; text-align:left;"> 这个虽然效果不错，但是如果一个页面有多个这样的效果，就要针对每一部分写多个JS函数，那就太蠢了。其实只有控件名称不同而已，<span style="color:#FF0000;">求高手改进成一个通用函数或者类来调用</span>，不胜感激。 </p>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

这个虽然效果不错，但是如果一个页面有多个这样的效果，就要针对每一部分写多个JS函数，那就太蠢了。其实只有控件名称不同而已，求高手改进成一个通用函数或者类来调用，不胜感激

<style type="text/css">  </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" style="color:#FF0000;">自动滑动+鼠标滑动区域</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" style="display:block;"><h1>新闻1</h1></td>   </tr>   <tr>     <td id="newsbox2" style="display:none;"><h1>新闻2</h1></td>   </tr>   <tr>     <td id="newsbox3" style="display:none;"><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" style="display:block;"><h1>财经1</h1></td>   </tr>   <tr>     <td id="ecBox2" style="display:none;"><h1>财经2</h1></td>   </tr>   <tr>     <td id="ecBox3" style="display:none;"><h1>财经3</h1></td>   </tr>   <tr>     <td id="ecBox4" style="display:none;"><h1>财经4</h1></td>   </tr>   <tr>     <td id="ecBox5" style="display:none;"><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" style="display:block;"><h1>财经1</h1></td>   </tr>   <tr>     <td id="bcBox2" style="display:none;"><h1>财经2</h1></td>   </tr>   <tr>     <td id="bcBox3" style="display:none;"><h1>财经3</h1></td>   </tr>   <tr>     <td id="bcBox4" style="display:none;"><h1>财经4</h1></td>   </tr>   <tr>     <td id="bcBox5" style="display:none;"><h1>财经5</h1></td>   </tr> </table>     </td>   </tr> </table> <script language="javascript">fwdScroll('bcNav','bcBox',5);</script> <h1 align="center" style="color:#FFCC00; font-size:150px; margin:0px auto;">！</h1> <p style="font-size:12px; text-align:left;"> 改了下，能够实现了，但是第二个为什么会默认第二个项开始,第三个从第三项开始呢？而且只有最后一个自动播放，前面的都死了；并且代码还是不够精练，请高手帮忙继续修改。 </p>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

<style type="text/css">  </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" style="color:#FF0000;">自动滑动+鼠标滑动区域</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" style="display:block;"><h1>新闻1</h1></td>   </tr>   <tr>     <td id="newsbox2" style="display:none;"><h1>新闻2</h1></td>   </tr>   <tr>     <td id="newsbox3" style="display:none;"><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" style="display:block;"><h1>财经1</h1></td>   </tr>   <tr>     <td id="ecBox2" style="display:none;"><h1>财经2</h1></td>   </tr>   <tr>     <td id="ecBox3" style="display:none;"><h1>财经3</h1></td>   </tr>   <tr>     <td id="ecBox4" style="display:none;"><h1>财经4</h1></td>   </tr>   <tr>     <td id="ecBox5" style="display:none;"><h1>财经5</h1></td>   </tr> </table>     </td>   </tr> </table> <script language="javascript">fwdScroll('ecNav','ecBox',5);</script> <h1 align="center" style="color:#FFCC00; font-size:150px; margin:0px auto;">！</h1> <p style="font-size:12px; text-align:left;"> <h1 align="center" style="color:#FF0000;">改过以后不自动播放了。</h1> </p>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：JavaScript实现图片滑动切换的代码示例分享

栏目：JavaScript代码

下一篇：javascript实现将数字转成千分位的方法小结【5种方式】

本文标题：js自动滑动+鼠标滑动区域

本文地址：http://www.codeinn.net/misctech/104429.html

更多JavaScript代码

阅读排行

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。

如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。

联系QQ：914707363 | 邮箱：codeinn#126.com(#换成@)

Copyright © 2020 代码驿站版权所有