您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> ASP.NET 基礎

ASP.NET 多圖輪播元件：資料庫驅動、後台管理、前端零代碼修改

編輯：ASP.NET 基礎

需求分析

官網首頁需一個多圖輪播區塊，行銷團隊要求：

圖片、連結、標題可在後台新增/編輯/刪除/排序。
前端頁面**完全無需修改代碼**即可生效。
支援自動播放、手動切換、標題顯示。

資料庫設計

CREATE TABLE [dbo].[SwitchFocusNews] (
    [Nbr]      TINYINT      IDENTITY(1,1) PRIMARY KEY,
    [ImageName] NVARCHAR(128) NOT NULL,  -- 儲存檔名，實體檔放 ~/FlashAnimation/images/
    [Url]       NVARCHAR(200) NOT NULL,  -- 點擊圖片導向連結
    [Title]     NVARCHAR(200) NOT NULL   -- 疊加標題文字
);
GO

CREATE PROCEDURE [dbo].[usp_SwitchFocusNews_GetAll]
AS
    SELECT [Nbr], [ImageName], [Url], [Title] FROM [dbo].[SwitchFocusNews] ORDER BY [Nbr];
GO

資料存取層 (VB.NET)

Imports System.Data
Imports Microsoft.VisualBasic

Namespace Insus.NET
    Public Class SwitchFocusNews
        Private objBusinessBase As New BusinessBase() ' 假設已封裝 ADO.NET

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

使用者控制項 (.ascx) — 封裝前端渲染邏輯

<%@ 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>

控制項後端代碼 — 動態生成 JavaScript 設定

Imports System.Data
Imports System.Text
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 dt As DataTable = objSwitchFocusNews.GetAll()
        If dt.Rows.Count = 0 Then Exit Sub

        Dim width As Integer = 500
        Dim height As Integer = 300
        Dim autoPlayInterval As Integer = 3 ' 秒

        Dim sb As New StringBuilder()
        sb.AppendLine("var box = new PPTBox();")
        sb.AppendFormat("box.width = {0};", width).AppendLine()
        sb.AppendFormat("box.height = {0};", height).AppendLine()
        sb.AppendFormat("box.autoplayer = {0};", autoPlayInterval).AppendLine()

        For Each row As DataRow In dt.Rows
            Dim imgUrl As String = ResolveUrl("~/FlashAnimation/images/" & row("ImageName").ToString())
            Dim href As String = row("Url").ToString()
            Dim title As String = row("Title").ToString().Replace("\", "\\").Replace("""", "\""") ' 簡單跳脫
            sb.AppendFormat("box.add({{ ""url"": ""{0}"", ""href"": ""{1}"", ""title"": ""{2}"" }});", imgUrl, href, title).AppendLine()
        Next

        sb.AppendLine("box.show();")
        LiteralSwitchImage.Text = sb.ToString()
    End Sub
End Class

前端輪播引擎 (pptBox.js 核心邏輯簡述)

此為自製/第三方簡易輪播庫，核心 API：

// 使用方式
var box = new PPTBox();
box.width = 500;
box.height = 300;
box.autoplayer = 3; // 秒
box.add({ url: "img1.jpg", href: "https://a.com", title: "標題一" });
box.add({ url: "img2.jpg", href: "https://b.com", title: "標題二" });
box.show(); // 渲染至 #insus 容器

實作要點：
1. `show()` 內建 `

`、``、``、`` 結構。
2. CSS 絕對定位疊加標題層。
3. `setInterval` 自動切換，滑鼠進入暫停。
4. 提供上一張/下一張按鈕、圓點指示器。