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

更新时间：2007年08月26日 15:34:10 作者：

<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需再刷新一下页面才能执行]

您可能感兴趣的文章:

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

相关文章

实现JavaScript中数据响应的方法总结
JavaScript 数据响应是一种重要的前端开发概念,是指在应用程序中的数据发生变化时,能够自动更新与这些数据相关的用户界面（UI）部分的能力,本文我们来总结一下目前可以简单实现 JavaScript 中的数据响应的方法,需要的朋友可以参考下
2023-09-09
JS将所有对象s的属性复制给对象r(原生js+jquery)
这篇文章主要介绍了js中将所有对象s的属性复制给对象r的方法，原生js+jquery分别实现
2014-01-01
js实现的四级左侧网站分类菜单实例
这篇文章主要介绍了js实现的四级左侧网站分类菜单,实例分析了javascript操作页面元素实现tab切换的相关技巧,需要的朋友可以参考下
2015-05-05
JavaScript 中的 this 绑定规则详解
这篇文章主要介绍了JavaScript 中的 this 绑定规则详解的相关资料,需要的朋友可以参考下
2023-02-02
Java前后端分离之权限管理示例分析
权限管理就是管理用户对于资源的操作。本 CRM 系统的权限（也称作资源）是基于角色操作权限来实现的，即RBAC（Role-Based Access Control，基于角色的访问控制），就是用户通过角色与权限进行关联
2022-08-08
JS闭包与延迟求值用法示例
这篇文章主要介绍了JS闭包与延迟求值,结合简单实例分析了JS针对运算量较大的情况下闭包与延迟求值的实现技巧,需要的朋友可以参考下
2016-12-12
Intellij中直接运行ts配置方法:run configuration for typescript
run configuration for typescript 插件本质还是依赖于ts-node来运行,只是其可以帮助我们自动配置好ts-node运行参数,简化使用,这篇文章给大家介绍在Intellij中可以借助插件run configuration for typescript直接运行typescript的方法,感兴趣的朋友一起看看吧
2023-08-08
javascript+css实现进度条效果
这篇文章主要为大家详细介绍了javascript+css实现进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
小程序开发基础之view视图容器
这篇文章主要介绍了小程序开发基础之view视图容器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
使用JSX 建立组件 Parser（解析器）开发的示例
这篇文章主要介绍了使用JSX 建立组件 Parser（解析器）开发的示例（前端组件化）本文重点讲述我们如何从0开始搭建一个组件系统，基于标记语言的Parser的一种风格
2021-04-04

最新评论