<html xmlns="http://www./1999/xhtml">
<head id="Head1" runat="server">
<title>DataList点击显示大图效果</title>
<script type="text/javascript">
function showDaTu(src){
document.getElementById("ImageShowBig").src=src;
}
</script>
</head>
<body >
<form id="Form1" method="post" runat="server">
<div>
<asp:Image ID="ImageShowBig" runat="server" Width="300px" Height="300px" />
</div>
<div id="demo" style="OVERFLOW: hidden; WIDTH: 922px; HEIGHT: 203px">
<table cellpadding="0" cellspacing="0" width="804px">
<tr>
<td id="demo1">
<asp:DataList ID="dlInfo" runat="server" Height="1px" RepeatColumns="30"
RepeatDirection="Horizontal" Width="41px">
<ItemTemplate>
<table style="width: 155px; height: 125px" cellpadding="0" cellspacing="0">
<tr>
<td style="height: 100px">
<asp:Image ID="Image1" runat="server" Height="133px" Width="168px"
ImageUrl='<%# "houtai/ProImg/" & Eval("productsimg") %>'
onclick="showDaTu(this.src)" /></td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</td>
<td id="demo2"></td>
</tr>
</table>
</div>
<script type="text/javascript" language="javascript">
//滚动速度
var speed=5
demo2.innerHTML=demo1.innerHTML
//从右至左
function Marquee(){
if(demo1.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft=0
else
demo.scrollLeft++
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function(){clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</form>
</body>
</html>
|
