<html>
<body>
<table>
<tr>
<td> //下面的div必不可少,非常重要。。。
<div id=BEIJING style=overflow:hidden;height:120px;width:700px>
<table>
<tr>
<td id=HAIDIAN>
<table>
<tr>
<td><img src="1.jpg"</td>
<td><img src="2.jpg"></td>
<td><img src="3.jpg"></td>
<td><img src="4.jpg"</td>
<td><img src="5.jpg"</td>
</tr>
</table>
</td>
<td id=CHAOYANG>
</td>
</tr>
</table>
</div>
<script>
var speed=10 //速度数值越大速度越慢
CHAOYANG.innerHTML=HAIDIAN.innerHTML
function Marquee()
{
if(CHAOYANG.offsetWidth-BEIJING.scrollLeft<=0)
{
BEIJING.scrollLeft-=HAIDIAN.offsetWidth
}
else
{
BEIJING.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
BEIJING.onmouseover=function()
{
clearInterval(MyMar)
}
BEIJING.onmouseout=function()
{
MyMar=setInterval(Marquee,speed)
}
</script>
</td>
</tr>
</table>
</body>
</html>
==============================
上面是普通的,下面的是DataList中滚动
==============================
<table> //标准DataList图片横滚
<tr>
<td>
<div id="demo" style="OVERFLOW: hidden; WIDTH: 1000px; HEIGHT: 125px">
<table>
<tr>
<td id="demo1">
<asp:datalist id="DataList1" runat="server" Width="712px" RepeatDirection="Horizontal">
<ItemTemplate>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("title") %>'></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Photo") %>' />
</td>
</tr>
</table>
</ItemTemplate>
</asp:datalist>
</td>
<td id="demo2">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
var Picspeed=30
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft <=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,Picspeed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,Picspeed)}
</script>
<body>
<table>
<tr>
<td> //下面的div必不可少,非常重要。。。
<div id=BEIJING style=overflow:hidden;height:120px;width:700px>
<table>
<tr>
<td id=HAIDIAN>
<table>
<tr>
<td><img src="1.jpg"</td>
<td><img src="2.jpg"></td>
<td><img src="3.jpg"></td>
<td><img src="4.jpg"</td>
<td><img src="5.jpg"</td>
</tr>
</table>
</td>
<td id=CHAOYANG>
</td>
</tr>
</table>
</div>
<script>
var speed=10 //速度数值越大速度越慢
CHAOYANG.innerHTML=HAIDIAN.innerHTML
function Marquee()
{
if(CHAOYANG.offsetWidth-BEIJING.scrollLeft<=0)
{
BEIJING.scrollLeft-=HAIDIAN.offsetWidth
}
else
{
BEIJING.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
BEIJING.onmouseover=function()
{
clearInterval(MyMar)
}
BEIJING.onmouseout=function()
{
MyMar=setInterval(Marquee,speed)
}
</script>
</td>
</tr>
</table>
</body>
</html>
==============================
上面是普通的,下面的是DataList中滚动
==============================
<table> //标准DataList图片横滚
<tr>
<td>
<div id="demo" style="OVERFLOW: hidden; WIDTH: 1000px; HEIGHT: 125px">
<table>
<tr>
<td id="demo1">
<asp:datalist id="DataList1" runat="server" Width="712px" RepeatDirection="Horizontal">
<ItemTemplate>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("title") %>'></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Photo") %>' />
</td>
</tr>
</table>
</ItemTemplate>
</asp:datalist>
</td>
<td id="demo2">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
var Picspeed=30
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft <=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,Picspeed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,Picspeed)}
</script>