基于Access的网页图片自动切换

曾垂振　郑炎　黄龙　蔡小艳　卢莉娜

摘要：在使用JavaScript语言实现网页中的图片的动态切换时，可以通过Access数据库存储图片的相关信息，并能通过修改Access数据库中的图片信息对网页中切换显示的图片进行添加、修改和删除，使得对于网页图片的修改更加方便。

关键词：JavaScript；Access数据库；图片切换；自动切换

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2017）02-0201-02

在信息大发展的时代，各种网页让人眼花缭乱，在网页中吸引人眼球的是各种不停切换的图片，当前网页设计的主流中主要有两种方法，一是利用Flash技术制作图片切换动画，然后将其插入到网页中，二是使用JavaScript实现图片的动态切换，通过创建数据库，引用外部CSS代码进行数据库调用，编写JavaScript代码完成图片的切换。

在使用外部的数据库中，大多将需要切换的图片信息使用XML文档存储。本文主要研究从Access数据库中直接读取图片数据，然后同过JavaScript语句实现在网页中进行图片切换，并能通过对数据库中的图片信息进行管理来实现对网页中图片数量和信息进行修改。

1 构建图片关键信息存储数据库表

现有的数据库很多，如SQL Server、oracle、Access等，对于存储信息数量少的图片信息，多会选择Access数据库，它是office办公软件中的一个模块，使用起来很方便。使用Access数据库的优点在于：在安装有office办公软件的计算机上不需要重新安装数据库程序。在本文的网站设计中使用的就是Access数据库。

对于每张要显示的图片，都将必要的信息存储在数据库表中，信息内容包图片的存储路径、链接目标网址、描述信息等。在设计中使用Access数据库软件创建数据库文件Image.mdb，在其中创建数据表img，表中包含存储图片信息的属性列URL（存储链接目标网址）、Description（描述信息）、Path（图片存储路径）等。每次更换图片信息时，可以将新的图片信息插入到数据库中，删除不需要的图片信息，然后通过网页编写的JS语言实现图片的更新与切换。

2 在网页中读取数据表中图片数据

为了保证网页显示时，在不切换网页和刷新网页的前提下实现图片的自动切换，需要将代码写在页面中，对数据库中图片信息的读取则写在源程序中，在源程序中将图片信息转换成能在网页界面中识别的模式，而后预导入到网页界面中来实现自动显示，在网页界面中使用<%=… %>语句来调用源程序中的函数，且调用的函数必须有返回值才能将信息读取到界面中，这里返回的是能识别图片信息的字符串。如果源程序中的读取图片信息的函数名为LoadPicture，则界面中的調用语句为<%=LoadPicture（）%>。

在源程序中编写LoadPicture函数，完成对图片关键信息的读取，并返回图片信息字符串。关键代码如下：

Private String LoadPIcture（）

{DataSet ds = new DataSet（）；

using （OleDbConnection cn = new OleDbConnection（"Provider=Microsoft.Jet.OLEDB.4.0；Data source=|DataDirectory|image.mdb"））

{cn.Open（）；

using （OleDbDataAdapter da = new OleDbDataAdapter（"Select * from img"， cn））

{try

{da.Fill（ds）； }

catch （Exception e）

{ base.Dispose（）；} }

cn.Close（）；}

string img = ""；

img += "var ImgSrc = new Array（）；"；//图片读取地址

img += "var ImgAlt = new Array（）；"；//鼠标放上去显示的文字

img += "var ImgHerf = new Array（）；"；//链接

for （int m = 0； m < ds.Tables[0].Rows.Count； m++）

{

img += "ImgSrc[" + m + "] = " + "＼"" + ds.Tables[0].Rows[m][" Path "].ToString（） + "＼"；"；

img += "ImgAlt[" + m + "] = " + "＼"" + ds.Tables[0].Rows[m]["Description"].ToString（） + "＼"；"；

img += "ImgHerf[" + m + "] = " + "＼"" + ds.Tables[0].Rows[m]["URL"].ToString（） + "＼"；"；

}

return img； }

通过上述程序段，最后可以返回一段可识别字符串至页面，此程序段将会在页面载入期间进行执行。当运行程序后在生成的页面中，页面代码中<%=LoadPicture（）%>语句将被一个存有图片信息的字符串所代替，这部分代码样式如下：

var ImgSrc = new Array（）；var ImgAlt = new Array（）；var ImgHerf = new Array（）； ImgSrc[0] ="image/1.jpg"； ImgAlt[0] = "科技之星"； ImgHerf[0] = "kgzx.aspx"； ImgSrc[1] ="image/2.jpg"； ImgAlt[1] = "城市之星"； ImgHerf[1] = "cszx.aspx"； …

这样图片组的相关信息就通过函数传递到了页面上，然后使用JavaScript语句调用这些图片信息实现图片的自动切换。在这里使用函数传递图片信息的好处在于：用户可以不修改页面设置，而只需修改ACCESS数据库中的图片信息就可以对页面上的图片进行更改、添加和删除。

3 使用JavaScript实现图片的切换效果

在实现图片切换前，先在页面中创建显示图片的载体——图像显示框。在对应的页面位置处添加如下代码。

style="Filter：blendTrans（duration=2）；width： 578px； height： 778px" />

这样就构建了一个可以显示并设置网页链接的图像显示框，当导入对应的图片信息和链接信息，在页面上就会显示对应的图片，而单击这张图片时将会打开设置的链接网页。实现图片的自动切换，还需要利用JavaScript语句控制图片的切换，利用setInterval函数来设置图片切换的间隔时间，这样就能在不刷新网页的情况下实现图片的自动切换。

定时切换图片的语句如下，使用JavaScript语句编写完成。

4 小结

在网页设计中通过Access数据库存储图片信息能很方便将网页进行搬迁，并且能很方便通过修改数据库中的图片信息，增加或减少显示图片的数量。基于Access的图片切换应用于一些展示用的网页上还是很方便的，本文中只涉及一种图片切换方式，用户还可以根据需要自行的改变页面代码中的滤镜来设定不同的图片切换效果，使网页更加的美观、简洁和人性化。

参考文献：

[1] 李婷妤，卢华灯.构建可配置的网页焦点图片切换技术[J].电脑知识与技术，2014（1）.

[2] 明日科技.JavaScript 从入门到精通[M].北京：清华大学出版社，2012：172-185.

[3] 于万国.用JavaScript 实现Web页的动态切换图片[J].河北北方学院学报（自然科学版），2013（12），29.6.

[4] 朱学平，王琼.编写AS脚本实现图片自动切换效果[J]. 湖北广播电视大学学报，2013（6）， 33.6.