蛇年多屏图片切换(可添加图片链接以及编辑标题)
程序员文章站
2024-03-05 19:54:13
朋友要求，做一个多屏图片切换效果，以作为网站广告宣传,刚开始听到此要求时，心想一定很简单照抄就行了。但是朋友还有进一步要求，是要在网站管理后统一管理，添加图片，链接以及标题...
朋友要求，做一个多屏图片切换效果，以作为网站广告宣传,刚开始听到此要求时，心想一定很简单照抄就行了。但是朋友还有进一步要求，是要在网站管理后统一管理，添加图片，链接以及标题。还能编辑这些信息。前台不必在每次更新时，去修改前台代码。
即然朋友有此要求，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
即然朋友有此要求，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