應(yīng)用CSS和Javascript技術(shù)實現(xiàn)圖片輪播

郭亞東

【摘 要】 近年來網(wǎng)頁設(shè)計技術(shù)實現(xiàn)了飛速的發(fā)展，而網(wǎng)頁中的內(nèi)容也不斷豐富，為了增強網(wǎng)頁的美觀感，運用新技術(shù)對網(wǎng)頁加以設(shè)計十分必要。CSS技術(shù)和Javascript技術(shù)是技術(shù)人員比較常用的兩種新技術(shù)，在實現(xiàn)圖片輪播方面具有十分重要的作用。文章中圍繞CSS技術(shù)和Javascript技術(shù)實現(xiàn)圖片輪播進(jìn)行了研究，這對于信息技術(shù)的發(fā)展具有十分重要的作用。

【關(guān)鍵詞】 CSS 計算機語言 Javascript技術(shù) 圖片輪播

受信息技術(shù)發(fā)展的影響，近年來網(wǎng)頁設(shè)計方法與技術(shù)也逐漸實現(xiàn)了發(fā)展，但是為了實現(xiàn)網(wǎng)頁內(nèi)容的優(yōu)化，加強網(wǎng)頁設(shè)計技術(shù)，也需要在網(wǎng)頁設(shè)計中融入一些新的設(shè)計技術(shù)，例如CSS技術(shù)和Javascript技術(shù)。CSS技術(shù)和Javascript技術(shù)是實現(xiàn)圖片輪播的重要技術(shù)，在網(wǎng)頁設(shè)計中加以運用不僅能夠提高網(wǎng)頁設(shè)計技術(shù)水平，同時也能夠進(jìn)一步豐富網(wǎng)頁內(nèi)容，實現(xiàn)網(wǎng)絡(luò)的快速發(fā)展。

一、輪播圖片概述

當(dāng)今互聯(lián)網(wǎng)行業(yè)中，“輪播”主要是以廣告輪播的形式存在，也就是某一廣告位中在同一個時間段內(nèi)輪流播放廣告，首先映入眼簾的廣告為隨機出現(xiàn)，之后每次刷新會更換新的廣告，進(jìn)而確保網(wǎng)頁中出現(xiàn)的每個廣告頻率一致。其中“圖片”則包含了網(wǎng)頁中的照片﹑拓片等基礎(chǔ)數(shù)據(jù)。立足于現(xiàn)階段互聯(lián)網(wǎng)行業(yè)的發(fā)展現(xiàn)狀，網(wǎng)頁圖片輪播的展現(xiàn)形式主要有靜態(tài)、動態(tài)兩種。綜上所訴，“輪播圖片”即在網(wǎng)頁中以輪播的形式進(jìn)行圖片的播放。

二、運用CSS 技術(shù)進(jìn)行輪播圖片的設(shè)計

首先，技術(shù)人員要利用width 、height 屬性對各個元素屬性進(jìn)行定義，并利用filter對幾張圖片的切換效果進(jìn)行控制，在overflow：hidden的形式對超出規(guī)定范圍的內(nèi)容自動切除，通過margin-left對圖片顯示位置進(jìn)行控制，利用no-repeat center center將控制序號居中處理，運用cursor：pointer技術(shù)將鼠標(biāo)的形狀改變?yōu)槭中螤顖D形，在font-family：Verdana的作用將數(shù)字更改為圓圈形式的阿拉伯?dāng)?shù)字。隨后，在display：block、display：none技術(shù)的基礎(chǔ)上，實現(xiàn)圖片的顯示以及隱藏，使其可以對Javascritp函數(shù)的調(diào)用進(jìn)行適應(yīng)。

一般情況下會利用以下CSS口令實現(xiàn)圖片的輪播： Style="filter：progid：DXImagetransform.Microsoft.GradientWipe（duration=1，gradientSize=0.5，motion=forward ）//使用css濾鏡控制圖片切換。

三、運用Javascript技術(shù)進(jìn)行輪播圖片的設(shè)計

Javascript函數(shù)在網(wǎng)頁的輪播圖片設(shè)計中發(fā)揮了核心作用，Javascript設(shè)計效果的實現(xiàn)與函數(shù)調(diào)度之間有密不可分的關(guān)系。一般在函數(shù)切換時的主要思想核心是要先將序號作為整型參數(shù)，并將其傳遞給函數(shù)，對數(shù)組showNum進(jìn)行定義，用其表示序號區(qū)。隨后利用文檔對象中所包含的getElementById 獲取容器對象，基于getElementsByTagName 的形式獲得容器對象中所包含的元素，將其賦值在之前所設(shè)定的showNum數(shù)組中。利用遍歷數(shù)組的形式，實現(xiàn)序號與圖片顯示塊“block”的對應(yīng)，剩余內(nèi)容分別和隱藏“none”相對應(yīng)。

設(shè)計自動輪播函數(shù)的原理流程如下所示：利用setInterval對定時器進(jìn)行設(shè)置，將圖片切換的順序進(jìn)行選擇，并默認(rèn)由首張圖片開始進(jìn)行切換，若已經(jīng)完成切換，顯示最后一張圖片時可以強制性返回至第一張圖片重新開始輪播，這樣便可以達(dá)到圖片輪播的效果。除此之外，設(shè)計人員也可以利用其他技術(shù)實現(xiàn)網(wǎng)頁中的圖片輪播，例如Flash技術(shù)以及XML技術(shù)等，將其他技術(shù)加以運用，便可以為網(wǎng)頁增添個性化的內(nèi)容。

四、圖片輪播設(shè)計基本結(jié)構(gòu)

在對框架結(jié)構(gòu)進(jìn)行設(shè)計時，通常有上下兩種結(jié)構(gòu)，其中上部分結(jié)構(gòu)主要作為顯示圖片區(qū)，而下部分區(qū)域則是對圖片的說明與序號標(biāo)注。將這兩個部分進(jìn)行連接，可以體現(xiàn)整體化的效果。一般情況下，下部分的圖片說明區(qū)域均帶有超鏈接作為文字說明，而圖片的序號區(qū)域在設(shè)計時主要以圓圈阿拉伯?dāng)?shù)字形式為主，當(dāng)鼠標(biāo)放置于該序號上方，那么計算機中的鼠標(biāo)便會轉(zhuǎn)換為手的形狀，這時圖片會即刻停止播放；若是鼠標(biāo)點擊序號，在圖片的顯示區(qū)域?qū)ο鄳?yīng)的圖片說明加以顯示；只要鼠標(biāo)離開序號區(qū)，圖片將會繼續(xù)輪播。圖片在輪播時會自動默認(rèn)為由首張圖片開始，在圖片切換的過程中也會顯示相應(yīng)的切換效果。

在設(shè)計圖片輪播代碼時，設(shè)計人員通常會利用class=“樣式名”、圖片的內(nèi)嵌樣式、css濾鏡、onmouseover=“Javascript 函數(shù)名”、onclick=“Javascript 函數(shù)名”等數(shù)據(jù)形式將CSS 與Javascript中所需要的內(nèi)容加以調(diào)用，再通過相應(yīng)代碼的設(shè)計實現(xiàn)網(wǎng)頁圖片的輪播。

【結(jié)束語】

文章中重點強調(diào)了圖片輪播插件設(shè)計時，所運用的CSS 與Javascript技術(shù)要點。通過CSS 與Javascript技術(shù)實現(xiàn)網(wǎng)頁圖片的輪播，不僅可以豐富網(wǎng)頁的基本內(nèi)容，同時也能夠提高網(wǎng)頁設(shè)計水平。在具體設(shè)計的過程中，設(shè)計人員需要對設(shè)計的框架進(jìn)行構(gòu)建，隨后再通過一些相應(yīng)的數(shù)據(jù)調(diào)用CSS 與Javascript內(nèi)容，以此對網(wǎng)頁中的圖片輪播插件進(jìn)行設(shè)計，以提高網(wǎng)頁中內(nèi)容的豐富性。

【參考文獻(xiàn)】

[1] 張紅琴，楊省偉. 基于CSS+JavaScript的網(wǎng)頁下拉菜單的設(shè)計與研究[J]. 蘇州大學(xué)學(xué)報（工科版），2012，02：61-66.

[2] 張紅琴，陳煥英. 基于CSS和JavaScript的網(wǎng)頁滾動字幕[J]. 長春工業(yè)大學(xué)學(xué)報（自然科學(xué)版），2012，02：165-170.

[3] 唐燦. 下一代Web界面前端技術(shù)綜述[J]. 重慶工商大學(xué)學(xué)報（自然科學(xué)版），2009，04：350-355.endprint