先看看效果:
在IE浏览时,图片跑马是很流畅的,但在生成动画时,有点跳。
本功能应用Jquery喔,另外Insus.NET把它写在一个用户控件上,在页面需要显示时,拉进去即可。
aspx:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<%
@ 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>
<% @ 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是跑马灯图片的高度。
用户控件:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<%
@ 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 >
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:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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
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
上面代码重点部分,是循环存放跑马灯的目录所有图片文件。即也是这篇http://www.cnblogs.com/insus/archive/2012/03/08/2385223.html 输出图片的目录。
另外由于时间关系,Insus.NET只是照搬专案可执行代码,并没有把它转写为C#。