<style type="text/css">
<!--
body{text-align:center;}
table{width:500px; margin:0px auto;}
td{padding:5px; font-weight:bold; text-align:center;}
.iborder{border:1px #333333 solid; margin-top:5px;}
.topnavon{background:#FFCC00; cursor:pointer;}
.topnavoff{background:#000000; color:#FFFFFF;}
-->
</style>
<script language="javascript">
<!--
/*新闻栏目播放*/
var scrollNewsCt=1;
var pauseTime=10*1000;
var timer0;
function hideAllClips() {
for (i=1; i<4; i++){
var allClips="newsbox"+i;
var clipNum="clipNum"+i;
document.getElementById(allClips).style.display="none";
document.getElementById(clipNum).className="topnavoff";
}
}
function clip_Switch(n) {
var curClip="newsbox"+n;
var curClipNum="clipNum"+n;
hideAllClips();
document.getElementById(curClip).style.display="block";
document.getElementById(curClipNum).className="topnavon";
scrollNewsCt=n;
}
function fwdScroll() {
stopScroll();
clip_Switch(scrollNewsCt);
scrollNewsCt+=1;
if (scrollNewsCt==4) {
scrollNewsCt=1;
}
timer0=setTimeout("fwdScroll()",pauseTime);
}
function stopScroll() {
clearTimeout(timer0);
}
/*财经栏目播放*/
var scrollEcCt=1;
var EcpauseTime=5*1000;
var timerEc;
function hideAllEcClips() {
for (i=1; i<6; i++){
var allEcBoxs="ecBox"+i;
var ecNavNum="ecNav"+i;
document.getElementById(allEcBoxs).style.display="none";
document.getElementById(ecNavNum).className="topnavoff";
}
}
function ecNavOn(n) {
var curEcBox="ecBox"+n;
var curEcNavNum="ecNav"+n;
hideAllEcClips();
document.getElementById(curEcBox).style.display="block";
document.getElementById(curEcNavNum).className="topnavon";
scrollEcCt=n;
}
function fecScroll() {
stopEcScroll();
ecNavOn(scrollEcCt);
scrollEcCt+=1;
if (scrollEcCt==6) {
scrollEcCt=1;
}
timerEc=setTimeout("fecScroll()",EcpauseTime);
}
function stopEcScroll() {
clearTimeout(timerEc);
}
-->
</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>
<br />
<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>
