心惊胆战的多屏图片切换

朋友要求，做一个多屏图片切换效果，以作为网站广告宣传。朋友提供样版参考http://www.lanrentuku.com/js/jiaodiantu-895.html 

刚开始听到此要求时，心想一定很简单照抄就行了。但是朋友还有进一步要求，是要在网站管理后统一管理，添加图片，链接以及标题。还能编辑这些信息。前台不必在每次更新时，去修改前台代码。

即然朋友有此要求，Insus.NET照做就是了。首先看看效果(今年是蛇年，刚好Windows 8 Themes也有几张蛇图片，因此拿它来做例子了。)

 

 

在数据库创建一个表，来存储相关信息，如图片名称，链接以及标题等：

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO


-- =============================================
-- Author:        Insus.NET
-- Create date: 2013-01-12
-- Description:    创建图片切换信息表
-- =============================================
CREATE TABLE [dbo].[SwitchFocusNews]
(
    [Nbr] TINYINT IDENTITY(1,1) PRIMARY KEY NOT NULL,
    [ImageName] NVARCHAR(128) NOT NULL,
    [Url] NVARCHAR(200) NOT NULL,
    [Title] NVARCHAR(200) NOT NULL
)

GO

 

创建一个存储过程，获取所有记录：

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author:        Insus.NET
-- Create date: 2013-01-12
-- Description:    获取所有记录
-- =============================================
CREATE PROCEDURE [dbo].[usp_SwitchFocusNews_GetAll]
AS
SELECT [Nbr],[ImageName],[Url],[Title] FROM [dbo].[SwitchFocusNews]
GO

网站后台上传图片，以及编辑功能，Insus.NET在此省略。

接下来，创建一个类别，此类别只有获取数据库表的信息，其它添加，编辑和删除方法略。

Imports System.Data
Imports Microsoft.VisualBasic
Namespace Insus.NET
    Public Class SwitchFocusNews
        Dim objBusinessBase As New BusinessBase()

        Public Function GetAll() As DataTable
            Return objBusinessBase.GetDataToDataSet("usp_SwitchFocusNews_GetAll").Tables(0)
        End Function
    End Class
End Namespace

为了以后维护方便，以及最小功能化的开发理念，Insus.NET把它写成一个用户控件ASCX，以下HTML代码，重点是在<script>之间放了一个asp:Literal控件。还一点，就是css与js也是在此引用。

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="FlashAnimation.ascx.vb" Inherits="AscxControls_FlashAnimation" %>
<link href='<%= ResolveUrl("~/FlashAnimation/css/lrtk.css")%>' rel="stylesheet" />
<script src='<%= ResolveUrl("~/FlashAnimation/js/pptBox.js")%>' ></script>
<div id="insus"  >
     <script>            
         <asp:Literal ID="LiteralSwitchImage" runat="server"></asp:Literal>
     </script>
    
</div>

用户控件cs代码：

Imports System.Data
Imports Insus.NET

Partial Class AscxControls_FlashAnimation
    Inherits System.Web.UI.UserControl

    '实例化类别
    Dim objSwitchFocusNews As New SwitchFocusNews()

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        Dim objDataTable As DataTable = objSwitchFocusNews.GetAll()

        '看看数据库是否有记录
        If objDataTable.Rows.Count > 0 Then
            Dim width As Integer = 500 '宽度
            Dim height As Integer = 300  '高度
            Dim autoPlayer As Integer = 3 '自动播放间隔时间


            Dim si As New StringBuilder()
            si.AppendFormat("var box = new PPTBox();")
            si.AppendFormat("box.width = {0};", width)
            si.AppendFormat("box.height = {0};", height)
            si.AppendFormat("box.autoplayer = {0};", autoPlayer)
            '循环数据表，把每一条记录循环显示以下面语法中。 图片路径正确是后台上传或是编辑时存储的路径。当然你也可把存储于数据的图片显示出来。
            For Each dr As DataRow In objDataTable.Rows
                si.AppendFormat("box.add({{ ""url"": ""{0}"", ""href"": ""{1}"", ""title"": ""{2}""}});", ResolveUrl("~/FlashAnimation/images/" & dr("ImageName").ToString() & ""), dr("Url").ToString(), dr("Title").ToString())
            Next
            si.Append("box.show();")

            Me.LiteralSwitchImage.Text = si.ToString()

        End If
    End Sub
End Class