用AJAX做的图片滚动效果(左右滚动)

来源:互联网 发布:做网络直播赚钱吗 编辑:程序博客网 时间:2024/06/05 17:27

<table border="0" cellpadding="0" cellspacing="0" style="width: 710px">
<tr>
<td id="demo1" valign="top" style="width: 710px; height:180px;">
<asp:DataList ID="DL_Product" runat="server" RepeatDirection="Horizontal" Height="151px" Width="721px">
<ItemTemplate>
<div class="bj">
<div class="bj1"> </div>
<div>
</div>
<div>
<table border="0" cellpadding="0" cellspacing="0" style="width: 170px; height: 129px">
<tr>
<td style=" height:3px;">
</td>
</tr>
<tr>
<td style="background-image: url(images/bj1.jpg); background-repeat:no-repeat; ">
<%--<a href="ProductDetails.aspx?id=<%#Eval("s_id") %>">--%><img src="UpFile/<%#Eval("s_images") %>" alt="" width="138" border="0" style="height: 120px" id="" /><br /><br /><%#Eval("s_name") %><%--</a>--%></td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:DataList>
</td>
<td id="demo2" valign="top" style="width: 1px; height: 180px;">
</td>
</tr>
</table>

不知道你是用什么做的!我用DataList做了一事例,的你要的效果一样!下面是AJAX代码:
<script type="text/javascript">
var speed=25
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>