首页 / 脚本样式 / JavaScript / js自动滑动+鼠标滑动区域

<style type="text/css"></style> <script language="javascript"></script> <h1 align="center" style="color:#FF0000;">自动滑动+鼠标滑动区域</h1> 10秒自动跳转 <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>5秒自动跳转 <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>，不胜感激。 <br/>
[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;"> 改了下，能够实现了，但是第二个为什么会默认第二个项开始,第三个从第三项开始呢？而且只有最后一个自动播放，前面的都死了；并且代码还是不够精练，请高手帮忙继续修改。 <br/>
[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> <br/>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]