蛇年多屏圖片切換(可添加圖片連結以及編輯標題)

朋友要求，做一個多屏圖片轉場效果，以作為網站廣告宣傳,剛開始聽到此要求時，心想一定很簡單照抄就行了。但是朋友還有進一步要求，是要在網站管理後統一管理，添加圖片，連結以及標題。還能編輯這些資訊。前台不必在每次更新時，去修改前台代碼。

即然朋友有此要求，Insus.NET照做就是了。首先看看效果(今年是蛇年，剛好Windows 8 Themes也有幾張蛇圖片，因此拿它來做例子了。)

在資料庫建立一個表，來儲存相關資訊，片名稱，連結以及標題等： 複製代碼 代碼如下:[dbo].[SwitchFocusNews]
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

建立一個預存程序，擷取所有記錄： 複製代碼 代碼如下:[dbo].[usp_SwitchFocusNews_GetAll]
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在此省略。

接下來，建立一個類別，此類別只有擷取資料庫表的資訊，其它添加，編輯和刪除方法略。 複製代碼 代碼如下:SwitchFocusNews
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