快捷導(dǎo)航

蛇年多屏圖片切換(可添加圖片鏈接以及編輯標(biāo)題)

更新時(shí)間：2013年01月14日 10:55:14 作者：

朋友要求，做一個(gè)多屏圖片切換效果可添加圖片，鏈接以及標(biāo)題，前臺(tái)不必在每次更新時(shí)，去修改前臺(tái)代碼

朋友要求，做一個(gè)多屏圖片切換效果，以作為網(wǎng)站廣告宣傳,剛開始聽到此要求時(shí)，心想一定很簡單照抄就行了。但是朋友還有進(jìn)一步要求，是要在網(wǎng)站管理后統(tǒng)一管理，添加圖片，鏈接以及標(biāo)題。還能編輯這些信息。前臺(tái)不必在每次更新時(shí)，去修改前臺(tái)代碼。

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

在數(shù)據(jù)庫創(chuàng)建一個(gè)表，來存儲(chǔ)相關(guān)信息，如圖片名稱，鏈接以及標(biāo)題等：

復(fù)制代碼代碼如下:

 
[dbo].[SwitchFocusNews] 
SET ANSI_NULLS ON 
GO 
SET QUOTED_IDENTIFIER ON 
GO 
-- ============================================= 
-- Author: Insus.NET 
-- Create date: 2013-01-12 
-- Description: 創(chuàng)建圖片切換信息表 
-- ============================================= 
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 

創(chuàng)建一個(gè)存儲(chǔ)過程，獲取所有記錄：

復(fù)制代碼代碼如下:

 
[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 

網(wǎng)站后臺(tái)上傳圖片，以及編輯功能，Insus.NET在此省略。

接下來，創(chuàng)建一個(gè)類別，此類別只有獲取數(shù)據(jù)庫表的信息，其它添加，編輯和刪除方法略。

復(fù)制代碼代碼如下:

 
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 

為了以后維護(hù)方便，以及最小功能化的開發(fā)理念，Insus.NET把它寫成一個(gè)用戶控件ASCX，以下HTML代碼，重點(diǎn)是在<script>之間放了一個(gè)asp:Literal控件。還一點(diǎn)，就是css與js也是在此引用。

復(fù)制代碼代碼如下:

 
<%@ 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代碼：

復(fù)制代碼代碼如下:

 
Imports System.Data 
Imports Insus.NET 
Partial Class AscxControls_FlashAnimation 
Inherits System.Web.UI.UserControl 
'實(shí)例化類別 
Dim objSwitchFocusNews As New SwitchFocusNews() 
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load 
Dim objDataTable As DataTable = objSwitchFocusNews.GetAll() 
'看看數(shù)據(jù)庫是否有記錄 
If objDataTable.Rows.Count > 0 Then 
Dim width As Integer = 500 '寬度 
Dim height As Integer = 300 '高度 
Dim autoPlayer As Integer = 3 '自動(dòng)播放間隔時(shí)間 
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) 
'循環(huán)數(shù)據(jù)表，把每一條記錄循環(huán)顯示以下面語法中。 圖片路徑正確是后臺(tái)上傳或是編輯時(shí)存儲(chǔ)的路徑。當(dāng)然你也可把存儲(chǔ)于數(shù)據(jù)的圖片顯示出來。 
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 