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

134 阅读 0 评论 89 点赞

我是靠谱客的博主心灵美煎饼，最近开发中收集的这篇文章主要介绍js自动滑动+鼠标滑动区域，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<style type="text/css"> 
 
</style> 
 
<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>

<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> 
 
<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> 
 
<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> 
 
<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> 
 
<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> 
 
<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> 
 
<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> 
 
<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> 
 
<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自动滑动+鼠标滑动区域的全部内容，希望文章能够帮你解决js自动滑动+鼠标滑动区域所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

点赞(89)

本文分类：JavaScript
浏览次数：134 次浏览
发布日期：2022-04-10 06:26:01
本文链接：https://www.kaopuke.com/article/k-p-k_14_u_7_o_18_f3_14__7__14_4.html

相关文章

最省空间的计数器

如何控制弹出一个NTLM验证窗口？

如何控制弹出一个NTLM验证窗口？

Photoshop将芦草中的美女图片打造唯美的粉调青蓝色

Photoshop将芦草中的美女图片打造唯美的粉调青蓝色

微软2015年7月安全更新公告：Win10幸免 Win7/Win8.1受影响

微软2015年7月安全更新公告：Win10幸免 Win7/Win8.1受影响

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

Win10 PC创造者更新15042预览版已修复和已知问题汇总

Win10 PC创造者更新15042预览版已修复和已知问题汇总

Photoshop将绘制出逼真的眼球效果的鼠绘实例教程

Photoshop将绘制出逼真的眼球效果的鼠绘实例教程

javaScript封装的各种写法

javaScript封装的各种写法

评论列表共有 0 条评论

发表评论取消回复

立即
投稿返回
顶部