朋友要求，做一個(gè)多屏圖片切換效果，以作為網(wǎng)站廣告宣傳,剛開(kāi)始聽(tīng)到此要求時(shí)，心想一定很簡(jiǎn)單照抄就行了。但是朋友還有進(jìn)一步要求，是要在網(wǎng)站管理后統(tǒng)一管理，添加圖片，鏈接以及標(biāo)題。還能編輯這些信息。前臺(tái)不必在每次更新時(shí)，去修改前臺(tái)代碼。
即然朋友有此要求，Insus.NET照做就是了。首先看看效果(今年是蛇年，剛好Windows 8 Themes也有幾張蛇圖片，因此拿它來(lái)做例子了。)
在數(shù)據(jù)庫(kù)創(chuàng)建一個(gè)表，來(lái)存儲(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ǔ)過(guò)程，獲取所有記錄：
復(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在此省略。
接下來(lái)，創(chuàng)建一個(gè)類別，此類別只有獲取數(shù)據(jù)庫(kù)表的信息，其它添加，編輯和刪除方法略。
復(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ù)方便，以及最小功能化的開(kāi)發(fā)理念，Insus.NET把它寫(xiě)成一個(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ù)庫(kù)是否有記錄
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)顯示以下面語(yǔ)法中。 圖片路徑正確是后臺(tái)上傳或是編輯時(shí)存儲(chǔ)的路徑。當(dāng)然你也可把存儲(chǔ)于數(shù)據(jù)的圖片顯示出來(lái)。
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
您可能感興趣的文章:- jquery焦點(diǎn)圖片切換(數(shù)字標(biāo)注/手動(dòng)/自動(dòng)播放/橫向滾動(dòng))
- jquery實(shí)現(xiàn)的帶縮略圖的焦點(diǎn)圖片切換(自動(dòng)播放/響應(yīng)鼠標(biāo)動(dòng)作)
- javascript實(shí)現(xiàn)圖片切換的幻燈片效果源代碼
- JQuery slideshow的一個(gè)小問(wèn)題(如何發(fā)現(xiàn)及解決過(guò)程)
