图片跑马灯-原创手记-慕课网

在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

上面代码重点部分，是循环存放跑马灯的目录所有图片文件。即也是这篇http://www.cnblogs.com/insus/archive/2012/03/08/2385223.html 输出图片的目录。

另外由于时间关系，Insus.NET只是照搬专案可执行代码，并没有把它转写为C#。