蛇年多屏图片切换(可添加图片链接以及编辑标题

应朋友的要求，我们打造了一个多屏图片切换效果，这一功能完美适用于网站的广告宣传。一开始，我们以为这只是一个简单的任务，抄抄代码就能完成。但朋友的进一步需求让我们意识到这不仅仅如此。他希望能在网站后台统一管理，添加图片、链接和标题，并能够轻松编辑这些信息，而无需每次更新时都去修改前台代码。听到这样的要求，Insus.NET团队立即行动起来。

为了展示效果，我们以蛇年为主题（今年是蛇年），使用Windows 8 Themes的几张蛇图片作为例子。在数据库方面，我们首先创建一个表，用于存储相关的信息，如图片名称、链接和标题等。具体的代码如下：

```csharp

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

)

```

接下来，我们创建一个存储过程来获取所有的记录信息。代码如下：

```csharp

CREATE PROCEDURE [dbo].[usp_SwitchFocusNews_GetAll]

AS

SELECT [Nbr],[ImageName],[Url],[Title] FROM [dbo].[SwitchFocusNews]

```

在网站后台方面，我们为用户提供了上传图片以及编辑的功能，这部分的内容我们在此略过以简化描述。随后，我们创建一个类别，这个类别主要用于获取数据库表的信息。关于添加、编辑和删除的方法在此也略过。相关的代码如下：

```csharp

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

```

代码起始部分：

```asp

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="FlashAnimation.ascx.vb" Inherits="AscxControls_FlashAnimation" %>

```

用户控件cs代码生动描述：

想象一下一个充满动态与活力的网页元素，它集动画、图片与文字于一身，这就是我们的`AscxControls_FlashAnimation`用户控件。它继承了`System.Web.UI.UserControl`，专为展示多媒体内容而设计。

每当页面加载时，这个控件便开始它的表演。它从数据库获取所有需要展示的信息，这些信息被存储在一个数据表`objDataTable`中。如果数据库中有记录，那么让我们开始吧！

设定动画框的宽度为500像素，高度为300像素，自动播放间隔时间为3秒。然后，我们遍历数据表中的每一行记录，将每条记录中的图片路径、链接和标题加入到动画框的配置中。这些图片可以是后台上传的，也可以是编辑时存储的路径。无论哪种方式，我们确保图片路径正确无误。

现在，让我们来看看这段代码的生动描述：

```csharp

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.aulayer = {0};", autoPlayer)

'遍历数据库中的记录，为动画框添加内容，就像一场精彩的演出，每个角色都有其独特的魅力。

For Each dr As DataRow In objDataTable.Rows

si.AppendFormat("box.add({{ ""url"": ""{0}"", ""href"": ""{1}"", ""title"": ""{2}"",""image"":""{3}""}});", ResolveUrl("~/FlashAnimation/images/" & dr("ImageName").ToString()), dr("Url").ToString(), dr("Title").ToString(), dr("ImagePath").ToString()) 添加图片路径等详细信息，让演出更加丰富多彩。

Next

si.Append("box.show();") 一切准备就绪，开始展示！

Me.LiteralSwitchImage.Text = si.ToString() 将脚本注入到页面，准备上演！

End If

End Sub

End Class 演出结束，观众热烈鼓掌！

```

调用`cambrian.render('body')`结束这场精彩的演出。每一次加载页面，这个用户控件都会带来新的惊喜和体验，让网站访问者流连忘返。