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

郭亞?wèn)|

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

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

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

一、輪播圖片概述

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

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

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

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

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

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

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

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

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

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

【結(jié)束語(yǔ)】

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

【參考文獻(xiàn)】

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

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

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