ASP.NET图片滚动+左右控制

前台

<TABLE style="BORDER: #ccc 1px solid;" mce_style="BORDER: #ccc 1px solid;" cellSpacing=0 cellPadding=0 width=750 align=center border=0> <TBODY> <TR> <td width="11%" valign="middle"> <asp:Image ID="Image1" runat="server" style="cursor:pointer;" mce_style="cursor:pointer;" onmouseover="GoLeft()" onclick="GoLeft()" ImageUrl="~/image/left_button.jpg" /> </td> <TD> <DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff"> <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0"> <TBODY> <TR> <TD id=demo1 vAlign=top> <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" CellPadding="2" onitemdatabound="DataList1_ItemDataBound"> <ItemTemplate> <asp:ImageButton ID="ImageButton1" runat="server" ToolTip='<%#Eval("PicText") %>' ImageUrl='<%#Eval("PicUrl") %>' Height="120" Width="120px" style="cursor:Hand"/> <%--<asp:Image ID="ImgPic" runat="server" ToolTip='<%#Eval("PicText") %>' ImageUrl='<%#Eval("PicUrl") %>' Height="120" Width="120px" style="cursor:Hand" />--%> </ItemTemplate> </asp:DataList> </TD> <TD id=demo2 vAlign=top></TD></TR></TBODY></TABLE></DIV> </TD><td width="11%" valign="middle"> <asp:Image ID="Image2" runat="server" style="cursor:pointer;" mce_style="cursor:pointer;" onmouseover="GoRight()" onclick="GoRight()" ImageUrl="~/image/right_button.jpg" /> </td></TR></TBODY></TABLE> <mce:script language=JavaScript src="js/scrollpic.js" mce_src="js/scrollpic.js"></mce:script>

JS文件scrollpic.js

var speed=80//速度数值越大速度越慢 demo2.innerHTML=demo1.innerHTML function Marquee() { if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else { demo.scrollLeft +=2; } } function Marqueeright() { if (demo.scrollLeft <= 0) { demo.scrollLeft += demo2.offsetWidth; } else { demo.scrollLeft -=2; } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout = function() { MyMar = setInterval(Marquee, speed) } function GoRight() { clearInterval(MyMar); MyMar = setInterval(Marqueeright, speed) } function GoLeft() { clearInterval(MyMar); MyMar = setInterval(Marquee, speed) }

后台C#

OperatorDb OperateDB = new OperatorDb(); protected void Page_Load(object sender, EventArgs e) { DataListAllBind(); } public void DataListAllBind() { DataList11Bind(); } public void DataList11Bind()//绑定GridView控件的自定义方法 { DataSet ds = new DataSet(); string sqlcmd = "select * from Image"; ds = OperateDB.GetResult(sqlcmd); DataList1.DataSource = ds; DataList1.DataBind(); } protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { DataRowView dv = (DataRowView)e.Item.DataItem; ImageButton ImageButton1 = (ImageButton)e.Item.FindControl("ImageButton1"); ImageButton1.PostBackUrl = "~/Default2.aspx?id=" + dv.Row["PicText"].ToString(); ; } }