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

时间:2021-07-08 16:17:09

朋友要求,做一个多屏图片切换效果,以作为网站广告宣传,刚开始听到此要求时,心想一定很简单照抄就行了。但是朋友还有进一步要求,是要在网站管理后统一管理,添加图片,链接以及标题。还能编辑这些信息。前台不必在每次更新时,去修改前台代码。 

即然朋友有此要求,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