應用CSS和Javascript技術實現圖片輪播

郭亞東

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

【關鍵詞】 CSS 計算機語言 Javascript技術 圖片輪播

受信息技術發展的影響，近年來網頁設計方法與技術也逐漸實現了發展，但是為了實現網頁內容的優化，加強網頁設計技術，也需要在網頁設計中融入一些新的設計技術，例如CSS技術和Javascript技術。CSS技術和Javascript技術是實現圖片輪播的重要技術，在網頁設計中加以運用不僅能夠提高網頁設計技術水平，同時也能夠進一步豐富網頁內容，實現網絡的快速發展。

一、輪播圖片概述

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

二、運用CSS 技術進行輪播圖片的設計

首先，技術人員要利用width 、height 屬性對各個元素屬性進行定義，并利用filter對幾張圖片的切換效果進行控制，在overflow：hidden的形式對超出規定范圍的內容自動切除，通過margin-left對圖片顯示位置進行控制，利用no-repeat center center將控制序號居中處理，運用cursor：pointer技術將鼠標的形狀改變為手形狀圖形，在font-family：Verdana的作用將數字更改為圓圈形式的阿拉伯數字。隨后，在display：block、display：none技術的基礎上，實現圖片的顯示以及隱藏，使其可以對Javascritp函數的調用進行適應。

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

三、運用Javascript技術進行輪播圖片的設計

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

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

四、圖片輪播設計基本結構

在對框架結構進行設計時，通常有上下兩種結構，其中上部分結構主要作為顯示圖片區，而下部分區域則是對圖片的說明與序號標注。將這兩個部分進行連接，可以體現整體化的效果。一般情況下，下部分的圖片說明區域均帶有超鏈接作為文字說明，而圖片的序號區域在設計時主要以圓圈阿拉伯數字形式為主，當鼠標放置于該序號上方，那么計算機中的鼠標便會轉換為手的形狀，這時圖片會即刻停止播放；若是鼠標點擊序號，在圖片的顯示區域將會對相應的圖片說明加以顯示；只要鼠標離開序號區，圖片將會繼續輪播。圖片在輪播時會自動默認為由首張圖片開始，在圖片切換的過程中也會顯示相應的切換效果。

在設計圖片輪播代碼時，設計人員通常會利用class=“樣式名”、圖片的內嵌樣式、css濾鏡、onmouseover=“Javascript 函數名”、onclick=“Javascript 函數名”等數據形式將CSS 與Javascript中所需要的內容加以調用，再通過相應代碼的設計實現網頁圖片的輪播。

【結束語】

文章中重點強調了圖片輪播插件設計時，所運用的CSS 與Javascript技術要點。通過CSS 與Javascript技術實現網頁圖片的輪播，不僅可以豐富網頁的基本內容，同時也能夠提高網頁設計水平。在具體設計的過程中，設計人員需要對設計的框架進行構建，隨后再通過一些相應的數據調用CSS 與Javascript內容，以此對網頁中的圖片輪播插件進行設計，以提高網頁中內容的豐富性。

【參考文獻】

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

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

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