基于Access的網(wǎng)頁圖片自動切換

曾垂振　鄭炎　黃龍　蔡小艷　盧莉娜

摘要：在使用JavaScript語言實現(xiàn)網(wǎng)頁中的圖片的動態(tài)切換時，可以通過Access數(shù)據(jù)庫存儲圖片的相關(guān)信息，并能通過修改Access數(shù)據(jù)庫中的圖片信息對網(wǎng)頁中切換顯示的圖片進行添加、修改和刪除，使得對于網(wǎng)頁圖片的修改更加方便。

關(guān)鍵詞：JavaScript；Access數(shù)據(jù)庫；圖片切換；自動切換

中圖分類號：TP311 文獻標(biāo)識碼：A 文章編號：1009-3044（2017）02-0201-02

在信息大發(fā)展的時代，各種網(wǎng)頁讓人眼花繚亂，在網(wǎng)頁中吸引人眼球的是各種不停切換的圖片，當(dāng)前網(wǎng)頁設(shè)計的主流中主要有兩種方法，一是利用Flash技術(shù)制作圖片切換動畫，然后將其插入到網(wǎng)頁中，二是使用JavaScript實現(xiàn)圖片的動態(tài)切換，通過創(chuàng)建數(shù)據(jù)庫，引用外部CSS代碼進行數(shù)據(jù)庫調(diào)用，編寫JavaScript代碼完成圖片的切換。

在使用外部的數(shù)據(jù)庫中，大多將需要切換的圖片信息使用XML文檔存儲。本文主要研究從Access數(shù)據(jù)庫中直接讀取圖片數(shù)據(jù)，然后同過JavaScript語句實現(xiàn)在網(wǎng)頁中進行圖片切換，并能通過對數(shù)據(jù)庫中的圖片信息進行管理來實現(xiàn)對網(wǎng)頁中圖片數(shù)量和信息進行修改。

1 構(gòu)建圖片關(guān)鍵信息存儲數(shù)據(jù)庫表

現(xiàn)有的數(shù)據(jù)庫很多，如SQL Server、oracle、Access等，對于存儲信息數(shù)量少的圖片信息，多會選擇Access數(shù)據(jù)庫，它是office辦公軟件中的一個模塊，使用起來很方便。使用Access數(shù)據(jù)庫的優(yōu)點在于：在安裝有office辦公軟件的計算機上不需要重新安裝數(shù)據(jù)庫程序。在本文的網(wǎng)站設(shè)計中使用的就是Access數(shù)據(jù)庫。

對于每張要顯示的圖片，都將必要的信息存儲在數(shù)據(jù)庫表中，信息內(nèi)容包圖片的存儲路徑、鏈接目標(biāo)網(wǎng)址、描述信息等。在設(shè)計中使用Access數(shù)據(jù)庫軟件創(chuàng)建數(shù)據(jù)庫文件Image.mdb，在其中創(chuàng)建數(shù)據(jù)表img，表中包含存儲圖片信息的屬性列URL（存儲鏈接目標(biāo)網(wǎng)址）、Description（描述信息）、Path（圖片存儲路徑）等。每次更換圖片信息時，可以將新的圖片信息插入到數(shù)據(jù)庫中，刪除不需要的圖片信息，然后通過網(wǎng)頁編寫的JS語言實現(xiàn)圖片的更新與切換。

2 在網(wǎng)頁中讀取數(shù)據(jù)表中圖片數(shù)據(jù)

為了保證網(wǎng)頁顯示時，在不切換網(wǎng)頁和刷新網(wǎng)頁的前提下實現(xiàn)圖片的自動切換，需要將代碼寫在頁面中，對數(shù)據(jù)庫中圖片信息的讀取則寫在源程序中，在源程序中將圖片信息轉(zhuǎn)換成能在網(wǎng)頁界面中識別的模式，而后預(yù)導(dǎo)入到網(wǎng)頁界面中來實現(xiàn)自動顯示，在網(wǎng)頁界面中使用<%=… %>語句來調(diào)用源程序中的函數(shù)，且調(diào)用的函數(shù)必須有返回值才能將信息讀取到界面中，這里返回的是能識別圖片信息的字符串。如果源程序中的讀取圖片信息的函數(shù)名為LoadPicture，則界面中的調(diào)用語句為<%=LoadPicture（）%>。

在源程序中編寫LoadPicture函數(shù)，完成對圖片關(guān)鍵信息的讀取，并返回圖片信息字符串。關(guān)鍵代碼如下：

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（）；"；//鼠標(biāo)放上去顯示的文字

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； }

通過上述程序段，最后可以返回一段可識別字符串至頁面，此程序段將會在頁面載入期間進行執(zhí)行。當(dāng)運行程序后在生成的頁面中，頁面代碼中<%=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"； …

這樣圖片組的相關(guān)信息就通過函數(shù)傳遞到了頁面上，然后使用JavaScript語句調(diào)用這些圖片信息實現(xiàn)圖片的自動切換。在這里使用函數(shù)傳遞圖片信息的好處在于：用戶可以不修改頁面設(shè)置，而只需修改ACCESS數(shù)據(jù)庫中的圖片信息就可以對頁面上的圖片進行更改、添加和刪除。

3 使用JavaScript實現(xiàn)圖片的切換效果

在實現(xiàn)圖片切換前，先在頁面中創(chuàng)建顯示圖片的載體——圖像顯示框。在對應(yīng)的頁面位置處添加如下代碼。

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

這樣就構(gòu)建了一個可以顯示并設(shè)置網(wǎng)頁鏈接的圖像顯示框，當(dāng)導(dǎo)入對應(yīng)的圖片信息和鏈接信息，在頁面上就會顯示對應(yīng)的圖片，而單擊這張圖片時將會打開設(shè)置的鏈接網(wǎng)頁。實現(xiàn)圖片的自動切換，還需要利用JavaScript語句控制圖片的切換，利用setInterval函數(shù)來設(shè)置圖片切換的間隔時間，這樣就能在不刷新網(wǎng)頁的情況下實現(xiàn)圖片的自動切換。

定時切換圖片的語句如下，使用JavaScript語句編寫完成。

4 小結(jié)

在網(wǎng)頁設(shè)計中通過Access數(shù)據(jù)庫存儲圖片信息能很方便將網(wǎng)頁進行搬遷，并且能很方便通過修改數(shù)據(jù)庫中的圖片信息，增加或減少顯示圖片的數(shù)量。基于Access的圖片切換應(yīng)用于一些展示用的網(wǎng)頁上還是很方便的，本文中只涉及一種圖片切換方式，用戶還可以根據(jù)需要自行的改變頁面代碼中的濾鏡來設(shè)定不同的圖片切換效果，使網(wǎng)頁更加的美觀、簡潔和人性化。

參考文獻：

[1] 李婷妤，盧華燈.構(gòu)建可配置的網(wǎng)頁焦點圖片切換技術(shù)[J].電腦知識與技術(shù)，2014（1）.

[2] 明日科技.JavaScript 從入門到精通[M].北京：清華大學(xué)出版社，2012：172-185.

[3] 于萬國.用JavaScript 實現(xiàn)Web頁的動態(tài)切換圖片[J].河北北方學(xué)院學(xué)報（自然科學(xué)版），2013（12），29.6.

[4] 朱學(xué)平，王瓊.編寫AS腳本實現(xiàn)圖片自動切換效果[J]. 湖北廣播電視大學(xué)學(xué)報，2013（6）， 33.6.