。net 环境下实现图片无刷新滚动

本文介绍了一个使用ASP.NET实现的水平滚动图片展示组件,该组件通过DataList控件结合JavaScript实现了图片及其链接的自动滚动效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<form   id="Form3"   method="post"   runat="server">
<FONT   face="宋体"> </FONT>
<TABLE   id="Table1"   style="WIDTH:   800px;   HEIGHT:   136px"   cellSpacing="0"   cellPadding="0"
border
="0">
<TR>
<TD>
<div   id="demo"   style="OVERFLOW:   hidden;   WIDTH:   1000px;   HEIGHT:   125px"   align="center"
DESIGNTIMEDRAGDROP
="134">
<TABLE   style="WIDTH:   725px;   HEIGHT:   96px">
<TR>
<TD   id="demo1"   vAlign="middle"> <asp:datalist   id="TopNewslist"   runat="server"   Width="712px"   RepeatDirection="Horizontal">
<ItemTemplate>
<FONT   face="宋体">
<TABLE   id="Table2"   style="WIDTH:   102px;   HEIGHT:   100px"   cellSpacing="0"   cellPadding="0"
width
="102"   border="0">
<TR>
<TD> <IMG   style="WIDTH:   98px;   HEIGHT:   95px"   height=95   alt=产品照片   src= ' <%#   DataBinder.Eval(Container.DataItem,"img_url","upimg/{0}")%> '   width=98   border=0> </TD>
</TR>
<TR>
<TD   align="center"> <A   href= 'Productinfo.aspx?Pid= <%#DataBinder.Eval(Container.DataItem,"id")%> '   target=_blank> <%#   DataBinder.Eval(Container.DataItem,"img_url")%> </A> </TD>
</TR>
</TABLE>
</FONT>
</ItemTemplate>
<AlternatingItemTemplate>
<TABLE   id="Table4"   style="WIDTH:   102px;   HEIGHT:   117px"   cellSpacing="0"   cellPadding="0"
width
="102"   border="0">
<TR>
<TD> <IMG   style="WIDTH:   98px;   HEIGHT:   95px"   height=95   alt=产品照片   src= ' <%#   DataBinder.Eval(Container.DataItem,"img_url","upimg/{0}")%> '   width=98   border=0> </TD>
</TR>
<TR>
<TD   align="center"> <A   href= 'Productinfo.aspx?Pid= <%#DataBinder.Eval(Container.DataItem,"id")%> '   target=_blank> <%#   DataBinder.Eval(Container.DataItem,"img_url")%> </A> </TD>
</TR>
</TABLE>
</AlternatingItemTemplate>
</asp:datalist> </TD>
<TD   id="demo2"   vAlign="top"> <FONT   face="宋体"> </FONT> </TD>
</TR>
</TABLE>
</div>
</TD>
</TR>
</TABLE>
<script>
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>
</form>
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值