js自动滑动+鼠标滑动区域- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js自动滑动+鼠标滑动区域

Javascript: JavaScript 解析Json字符串的性能比较分析代码; js 日期字符串截取分割成单个具体的日期(2009-12-30 13:28:29); javascript 倒计时代码; javascript 语法基础想学习js的朋友可以看看; javascript获取元素文本内容的通用函数; javascript 动态设置已知select的option的value值的代码; jquery 简单的图片展示效果; js textarea自动增高并隐藏滚动条; Javascript 中介者模式实例; textbox 在光标位置插入字符功能的js实现(兼容ie,firefox); jQuery Attributes(属性)的使用(二、类篇); Javascript document.referrer判断访客来源网址; [原创]javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox]; javascript获得光标所在的文本框(text/textarea)中的位置; event.srcElement 用法笔记e.target; javascript 导出数据到Excel(处理table中的元素); javascript DOM操作之动态删除TABLE多行; Javascript在IE或Firefox下获取鼠标位置的代码; Javascript 多浏览器兼容性问题及解决方案; 让div层随鼠标移动的实现代码 ie ff

No. « ‹ 250 251 252 253 › »

技术文章搜索

关键字

Javascript 中的 js自动滑动+鼠标滑动区域

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 149 ::

收藏到网摘: n/a

识别操作系统是不是vista的js代码 LBS blog sql注射漏洞[All version]-官方已有补丁

点击运行可以看到效果:

<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>，不胜感激。

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

这个虽然效果不错，但是如果一个页面有多个这样的效果，就要针对每一部分写多个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;">
改了下，能够实现了，但是第二个为什么会默认第二个项开始,第三个从第三项开始呢？而且只有最后一个自动播放，前面的都死了；并且代码还是不够精练，请高手帮忙继续修改。

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

点击运行可以看到效果:

<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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

识别操作系统是不是vista的js代码 LBS blog sql注射漏洞[All version]-官方已有补丁

评论 (0) All