实现datalist的走马灯效果(滚动)
横向滚动
<table id=”Table1″ align=”center” style=”width: 650px; height: 100px” cellspacing=”0″
cellpadding=”0″ border=”0″>
<tr>
<td>
<div id=”demo” style=”overflow: hidden; width: 650px; height: 100px” align=”center”
designtimedragdrop=”134″>
<table>
<tr>
<td id=”demo1″ valign=”middle”>
<asp:DataList ID=”DataList1″ runat=”server” Width=”650px”
RepeatDirection=”Horizontal”>
<ItemTemplate>
<table id=”Table2″ cellspacing=”0″ cellpadding=”0″ width=”102″
border=”0″>
<tr>
<td>
<img src=’<%#DataBinder.Eval
(Container.DataItem,”tp”)%>’ border=”0″></td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</td>
<td id=”demo2″ valign=”top”>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script type=”text/javascript”>
var Picspeed=10; ///滚动速度 越小越快
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.οnmοuseοver=function(){clearInterval(MyMar1)}
demo.οnmοuseοut=function(){MyMar1=setInterval(Marquee1,Picspeed)}
</script>
纵向滚动
<div id=”ldh”>
<div id=”newsBlock”>
<div style=”text-align:center” id=”subBlock”>
<asp:Repeater ID=”rptLdh” runat =”server” >
<ItemTemplate>
<div>
<img width=”175px” src=’/xiaofei/html/images/<%#Eval(”tp”) %>’>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
<script>
var block = document.all["newsBlock"]
block.insertAdjacentHTML(”beforeEnd” , block.children[0].outerHTML)
block.runtimeStyle.overflow = “hidden”
setInterval(function()
{
block.scrollTop++
block.runtimeStyle.height = block.children[0].offsetHeight
if ((block.scrollTop + block.children[0].offsetHeight) == block.scrollHeight)
block.scrollTop = 1
},20)
</script>
</div>