社区学习工具库休闲

简体中文

首页 > web前端 > js教程 > js自动滑动+鼠标滑动区域_javascript技巧

js自动滑动+鼠标滑动区域_javascript技巧

WBOY

发布： 2016-05-16 19:09:33

原创

1273 人浏览过

<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;"> 
</p>
<h1 align="center" style="color:#FF0000;">改过以后不自动播放了。</h1>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

相关标签：

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

来源：php.cn

上一篇：（兼容ff/ie）td点击背景变色特效_javascript技巧下一篇：javascript select列表内容按字母倒序排序与按列表倒序排列_表单特效

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

什么是 NullPointerException，如何修复它？

2024-10-22 09:46:29
从新手到程序员：您的旅程从 C 基础知识开始

2024-10-13 13:53:41
使用PHP解锁网络开发：初学者指南

2024-10-12 12:15:51
揭秘 C：为新程序员提供一条清晰简单的道路

2024-10-11 22:47:31
释放您的编码潜力：绝对初学者的 C 编程

2024-10-11 19:36:51
释放你内心的程序员：C 绝对初学者

2024-10-11 15:50:41
使用 C 自动化您的生活：适合初学者的脚本和工具

2024-10-11 15:07:41
PHP 变得简单：Web 开发的第一步

2024-10-11 14:21:21
使用 Python 构建任何东西：释放创造力的初学者指南

2024-10-11 12:59:11
编码的关键：为初学者释放 Python 的力量

2024-10-11 12:17:31

最新问题

function_exists()无法判定自定义函数 function test() { return true; } if (function_exists('TEST')) { ech...

来自于 2024-04-29 11:01:01

0

3

2176

google 浏览器手机版显示的怎么实现老师您好，google 浏览器怎么变成手机版样式的？

来自于 2024-04-23 00:22:19

0

11

2329

子窗口操作父窗口，输出没反应前两句可执行，最后一句没法应

来自于 2024-04-19 15:37:47

0

1

1959

父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出'); ...

来自于 2024-04-18 23:52:34

0

1

1843

关于CSS思维导图的课件在哪？课件

来自于 2024-04-16 10:10:18

0

0

1892

相关专题

更多>

热门推荐

热门教程

更多>

相关教程

热门推荐

最新课程

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1422728
php入门教程之一周学会PHP

4267730
JAVA 初级入门视频教程

2531509
小甲鱼零基础入门学习Python视频教程

507128
PHP 零基础入门教程

862223

最新下载

更多>

网站特效

网站源码

网站素材

前端模板