蛇年多屏图片切换(可添加图片链接以及编辑标题)
2013-01-14 00:00
507 查看
朋友要求,做一个多屏图片切换效果,以作为网站广告宣传,刚开始听到此要求时,心想一定很简单照抄就行了。但是朋友还有进一步要求,是要在网站管理后统一管理,添加图片,链接以及标题。还能编辑这些信息。前台不必在每次更新时,去修改前台代码。
即然朋友有此要求,Insus.NET照做就是了。首先看看效果(今年是蛇年,刚好Windows 8 Themes也有几张蛇图片,因此拿它来做例子了。)
在数据库创建一个表,来存储相关信息,如图片名称,链接以及标题等:
创建一个存储过程,获取所有记录:
网站后台上传图片,以及编辑功能,Insus.NET在此省略。
接下来,创建一个类别,此类别只有获取数据库表的信息,其它添加,编辑和删除方法略。
为了以后维护方便,以及最小功能化的开发理念,Insus.NET把它写成一个用户控件ASCX,以下HTML代码,重点是在<script>之间放了一个asp:Literal控件。还一点,就是css与js也是在此引用。
用户控件cs代码:
即然朋友有此要求,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
相关文章推荐
- 蛇年多屏图片切换(可添加图片链接以及编辑标题)
- 固定GridView标题头以及向Head添加元素的一些做法的链接
- jQuery图片热点链接添加编辑插件
- Django学习之为网站添加图标以及模板链接图片
- jQuery图片热点链接添加编辑插件
- 切换图片、fragment;可以控制循环、时间,添加下标及下标设置,fragment 添加标题及标题设置
- 【博客园发文技巧】不离开编辑页面,批量添加图片链接和设置图片大小
- 新闻图片切换播放和自动切换播放以及链接功能【js+css设计】
- 界面上添加以及编辑图片
- 自定义View练习一之图片以及标题随手势方向平滑加载
- jQuery的动画效果以及图片切换实例
- jQuery 图片切换 响应键盘 关联标题
- H5学习之旅-H5的超链接以及图片链接(6)
- 修改iOS导航栏标题的字体颜色和大小以及导航栏的背景图片
- 设置网页图片热点链接以及坐标值示例代码
- 如何固定OpenERP顶的主菜单,方便滚动至第二屏以及多屏时,快速切换主菜单
- asp.net正则表达式提取网页网址、标题、图片实例以及过滤所有HTML标签实例
- VC3自定义标签,给ajax.Action和Html.ActionLink加上支持图片链接的功能,添加了htmlAttributes
- PHP 给页面内容中的所有图片添加特定链接
- 仿Android联系人SideBar排序,根据拼音A-Z字母快速导航联系人姓名,以及输入搜索条件过滤,显示姓名的文字图片,添加挤压动画