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

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

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

相关文章

  • DataSet.Tables[].Rows[][]的用法详细解析

    DataSet.Tables[].Rows[][]的用法详细解析

    以下是对DataSet.Tables[].Rows[][]的用法进行了详细的分析介绍,需要的朋友可以过来参考下
    2013-09-09
  • ASP.Net MVC+Data Table实现分页+排序功能的方法

    ASP.Net MVC+Data Table实现分页+排序功能的方法

    这篇文章主要介绍了ASP.Net MVC+Data Table实现分页+排序功能的方法,结合实例形式分析了asp.net基于mvc架构实现的数据查询、排序、分页显示等相关操作技巧,需要的朋友可以参考下
    2017-06-06
  • asp.net 自制的单选、多选列表实现代码

    asp.net 自制的单选、多选列表实现代码

    在ASP.NET的页面上,ListBox最终是渲染成select元素,而CheckListBox最终被渲染成div或者是table,使得二者的样式无法统一,或者说要统一很麻烦。
    2009-08-08
  • WPF的数据绑定详细介绍

    WPF的数据绑定详细介绍

    数据绑定:是应用程序 UI 与业务逻辑之间建立连接的过程。 如果绑定正确设置并且数据提供正确通知,则当数据的值发生更改时,绑定到数据的视觉元素会自动反映更改。 数据绑定可能还意味着如果视觉元素中数据的外部表现形式发生更改,则基础数据可以自动更新以反映更改。
    2013-03-03
  • ASP.NET Forms身份认证详解

    ASP.NET Forms身份认证详解

    在这篇文章中,不会涉及ASP.NET的登录系列控件以及membership的相关话题,我只想用比较原始的方式来说明在ASP.NET中是如何实现身份认证的过程。
    2015-09-09
  • Sqlite 常用函数封装提高Codeeer的效率

    Sqlite 常用函数封装提高Codeeer的效率

    以下是频繁用到的Sqlite函数,内容格式相对固定,封装一下有助于提高开发效率^_^至少提高Codeeer的效率了
    2012-12-12
  • C#处理Json的另外一种方式成功实践

    C#处理Json的另外一种方式成功实践

    通过C#调用js,用Js解析Json,并将返回值转换为C#数组,这种思路相信你没有用过吧,试试也无妨啊,感兴趣的你可千万不要走开啊
    2013-01-01
  • .NET Core 3.0中WPF使用IOC的图文教程

    .NET Core 3.0中WPF使用IOC的图文教程

    这篇文章主要给大家介绍了关于在.NET Core 3.0中WPF使用IOC的图文教程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • gridview实现服务器端和客户端全选的两种方法分享

    gridview实现服务器端和客户端全选的两种方法分享

    这篇文章主要介绍了gridview实现服务器端和客户端全选的两种方法,需要的朋友可以参考下
    2014-02-02
  • .NET Core3.1发布(翻译)

    .NET Core3.1发布(翻译)

    这篇文章主要介绍了.NET Core3.1发布(翻译),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12

最新评论