先看看效果：
在IE浏览时，图片跑马是很流畅的，但在生成动画时，有点跳。
本功能应用Jquery喔，另外Insus.NET把它写在一个用户控件上，在页面需要显示时，拉进去即可。
aspx:
View Code <% @ Page Language = " VB " AutoEventWireup = " false " CodeFile = " Default.aspx.vb " Inherits = " _Default " %> <% @ Register Src = " SiteControls/SlideMarquee.ascx " TagName = " SlideMarquee " TagPrefix = " uc1 " %> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head runat ="server" > < title ></ title > < script src ='<%= ResolveUrl("~/Scripts/jquery-1.7.1.js") % > ' type="text/javascript"></script></head><body> <form id="form1" runat="server"> <div> <br /> <uc1:SlideMarquee ID="SlideMarquee1" runat="server" Speed="15" Width="160" Height="120" /> </div> </form></body></html>
用户控件有写了三个属性，Speed设置跑马灯的滑动速度，Width跑马灯图片的宽度，Height是跑马灯图片的高度。
用户控件：
View Code <% @ Control Language = " VB " AutoEventWireup = " false " CodeFile = " SlideMarquee.ascx.vb " Inherits = " SiteControls_SlideMarquee " %> < style type ="text/css" > * { margin : 0 ; padding : 0 ; } img { border : none ; } #slide { overflow : hidden ; } ul { list-style : none ; } li { float : left ; } .slideul1 { width : 3999px ; } </ style > < div id ="slide" > < ul class ="slideul1" > < li class ="slideli1" > < asp:Literal ID ="LiteralSM" runat ="server" ></ asp:Literal > < li class ="slideli2" ></ li > </ ul > </ div > < script type ="text/javascript" > var _speed = < asp:Literal ID = " LiteralJsCode " runat = " server " >< / asp:Literal> var _slide = $( " #slide " ); var _slideli1 = $( " .slideli1 " ); var _slideli2 = $( " .slideli2 " ); _slideli2.html(_slideli1.html()); function Marquee() { if (_slide.scrollLeft() >= _slideli1.width()) _slide.scrollLeft( 0 ); else { _slide.scrollLeft(_slide.scrollLeft() + 1 ); } } $( function () { var sliding = setInterval(Marquee, _speed) _slide.hover( function () { clearInterval(sliding); }, function () { sliding = setInterval(Marquee, _speed); }); }); </ script >
从上面的代码中，Insus.NET有用了两个asp:Literal 控件，作为可传入参数。一个将是显示图片，另一个是传入跑马灯滑动速度。
xxx.asc.vb:
View Code Imports System.IO Imports System.Web.UI.HtmlControls Imports System.Xml Imports Insus.NET Partial Class SiteControls_SlideMarquee Inherits System.Web.UI.UserControl Private _Speed As Integer = 10 Private _Width As Integer = 80 Private _Height As Integer = 60 Public WriteOnly Property Speed() As Integer Set(value As Integer) _Speed = value End Set End Property Public WriteOnly Property Width() As Integer Set(value As Integer) _Width = value End Set End Property Public WriteOnly Property Height() As Integer Set(value As Integer) _Height = value End Set End Property Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load Me.LiteralJsCode.Text = _Speed Dim di As New DirectoryInfo(HttpContext.Current.Server.MapPath(InsusBase.SlideMarqueeImageDirectory)) Dim fiArray As FileInfo() = di.GetFiles() Dim s As String = "" For i As Integer = 0 To fiArray.Length - 1 s &= " <li><img src="" " & ResolveUrl(InsusBase.SlideMarqueeImageDirectory) & fiArray(i).Name & " "" width="" " & _Width & " "" height="" " & _Height & " "" /></li> " Next Me.LiteralSM.Text = " <ul class=""slideul2""> " & s & " </ul> " End Sub End Class
上面代码重点部分，是循环存放跑马灯的目录所有图片文件。即也是这篇 输出图片的目录。
另外由于时间关系，Insus.NET只是照搬专案可执行代码，并没有把它转写为C#。