用js实现广告样式的图片滚动
一个网友给的，用起来挺方便．
<html>
<head>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style type="text/css">
#castroom { OVERFLOW: hidden; WIDTH: 730px; POSITION: relative; HEIGHT: 88px; }
</style>
<script language="javascript">
/*************用户设定*****************/
var scrollPerRowTime = 6000; //滚动一行所用时长
var movePerPixTime = 15; //移动一个象素时长
var tableID="table_AD"; //要滚动的表格ID
var rowHeight=88; //表格高度
/************************************/
var curShowRowIndex=0; //当前显示行号
var oTable=null;
var onMouseOver=false;
//开始滚动
function StartScroll()
{
initTable();
window.setInterval("startShow()",scrollPerRowTime);
}
//初始化表格，设置定位方式，隐藏表格
function initTable()
{
oTable=window.document.getElementById(tableID);
oTable.style.position="relative"; //设置为关联定位方式
for(var i=0;i<oTable.rows.length;i++)
{
oTable.rows[i].style.height = rowHeight;
}
oTable.style.top=0;
var oDiv=window.document.getElementById("castroom");
if(oDiv!=null)
{
oDiv.onmouseover=DivOnMouseOver;
oDiv.onmouseout=DivOnMouseOut;
//oDiv.onmouseout={ onMouseOver=false};
}
}
function DivOnMouseOver()
{
onMouseOver=true;
}
function DivOnMouseOut()
{
onMouseOver=false;
}
//完成滚动一行
function startShow()
{
if(!onMouseOver)
{
//0.5秒开始移动
window.setTimeout("moveRow()",1500);
//循环改变当前显示行号
curShowRowIndex = curShowRowIndex<(oTable.rows.length-1) ? curShowRowIndex+1:0;
}
}
//移动一行
function moveRow()
{
if(curShowRowIndex==0)
{
oTable.style.top=rowHeight;
}
//开始移动
window.setTimeout("moveOnePix("+ rowHeight +")",movePerPixTime);
}
//移动一个单位 temp为移动后所剩高度
function moveOnePix(tempHeight)
{
if(tempHeight>0 ) //继续移动
{
if(!onMouseOver)
{
tempHeight--;
var tempTop=oTable.style.top;
tempTop=tempTop.replace("px","");
oTable.style.top =Number(tempTop) - 1;
}
window.setTimeout("moveOnePix("+ tempHeight +")",movePerPixTime);
}
}
</script>
<table align="center" width="316" border="0">
<tr>
<td><DIV id="castroom">
<table id="table_AD" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="td3"><img border="0" src="/Web.Booking_Internet/Images/PanGolf/Ad/ad%20(3).jpg" width="170"
height="66" /></td>
<td class="td3"><img border="0" src="/Web.Booking_Internet/Images/PanGolf/Ad/ad%20(4).jpg" width="170"
height="66" /></td>
<td class="td3"><img border="0" src="/Web.Booking_Internet/Images/PanGolf/Ad/ad%20(5).jpg" width="170"
height="66" /></td>
<td class="td4"><img border="0" src="/Web.Booking_Internet/Images/PanGolf/Ad/ad.jpg" width="170" height="66" /></td>
</tr>
<tr>
<td class="td3"><p align="center"><font face="Arial">G-AXE GOLF CO.,LTD.</font></p>
</td>
<td class="td3"><p align="center">唯尔胜体育用品</p>
</td>
<td class="td3"><p align="center">九龙山高尔夫球会</p>
</td>
<td class="td4"><p align="center">中国高尔夫高球假期</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="td3"><img border="0" src="/Web.Booking_Internet/Images/PanGolf/Ad/ad(12).jpg" width="170"
height="66" /></td>
<td class="td3"><img border="0" src="/Web.Booking_Internet/Images/PanGolf/Ad/ad%20(9).jpg" width="170"
height="66" /></td>
<td class="td3"><img border="0" src="/Web.Booking_Internet/Images/PanGolf/Ad/ad%20(2).jpg" width="170"
height="66" /></td>
<td class="td4"><img border="0" src="/Web.Booking_Internet/Images/PanGolf/Ad/ad%20(8).jpg" width="170"
height="66" /></td>
</tr>
<tr>
<td class="td3"><p align="center"><font face="Arial">PRIMUS GOLF</font></p>
</td>
<td class="td3"><p align="center">中信银行</p>
</td>
<td class="td3"><p align="center">华夏萄园B区干红</p>
</td>
<td class="td4"><p align="center">永衡碱性等离子水</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="td3"><img border="0" src="/Web.Booking_Internet/Images/PanGolf/Ad/ad%20(7).jpg" width="170"
height="66" /></td>
<td class="td3"><img border="0" src="/Web.Booking_Internet/Images/PanGolf/Ad/ad(11).jpg" width="170"
height="66" /></td>
<td class="td3"><img border="0" src="/Web.Booking_Internet/Images/PanGolf/Ad/ad%20(6).jpg" width="170"
height="66" /></td>
<td class="td4"><img border="0" src="/Web.Booking_Internet/Images/PanGolf/Ad/ad%20(10).jpg" width="170"
height="66" /></td>
</tr>
<tr>
<td class="td3"><p align="center">聚成企业培训</p>
</td>
<td class="td3"><p align="center">威龙干红葡萄酒</p>
</td>
<td class="td3"><p align="center">肇庆高尔夫渡假村</p>
</td>
<td class="td4"><p align="center">豪麟名鞋世家</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</DIV>
</td>
</tr>
</table>
<script language="javascript">
StartScroll();
</script>
</head>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
</form>
</body>
</html>
【作者: chang110cn】【访问统计:】【2007年01月26日 星期五 09:03】【注册】【打印】
Trackback
你可以使用这个链接引用该篇文章 http://publishblog.blogchina.com/blog/tb.b?diaryID=6068693
