基于CSS3和jQuery技術3D切割輪播圖的實現

李燕華

（北京市海淀區職工大學 北京市 100083）

輪播圖是在Web 頁面展示信息的一種方式，顯示在首頁的頂部，在有限的網頁空間中采用高分辨率的圖片來顯示電商網站的商品信息或者其他網站的重要宣傳信息，用戶不用滾動屏幕就能看到更多內容，極大提高了網頁的觀賞性和可讀性[1]。網頁制作新技術HTML5 對于3D 技術有很好的支持，可以制作效果更炫的3D 切割輪播圖。本文利用HTML、CSS3 和jQuery 完成了3D 切割輪播圖從布局到運行的總體實現，其中HTML 搭建頁面結構，CSS3 設置頁面樣式和3D 轉換，使用jQuery 技術實現交互效果。

1 3D切割輪播圖的描述

3D 切割輪播圖一般使用4 張圖片進行旋轉切換輪播，圖片切換時并不是一次性的整張圖片都切換過來，而是分成幾塊逐次切換（本文把圖片分成5 塊來演示），最終形成一張完整圖片，從而形成立體的切割輪播圖效果。如圖1、圖2、圖3所示。

2 3D切割輪播圖的實現思想

3D 切割輪播圖中圖片旋轉切換是利用了CSS3 的3D 旋轉功能，把四張用來切換的圖片分別看作一個立方體的前、上、后、下四個面，通過立方體沿著X 軸旋轉來實現圖片的切換，從而形成一種立體旋轉效果。

所謂的切割也并不是真的把圖片進行物理分割，而是把存放圖片的區域分成幾列，把圖片分別作為這幾列的背景，通過CSS 定位功能改變背景圖片的位置，使得在不同區域顯示圖片的不同部分，從而達到分割圖片效果。

以上布局形成了多個立方體，把這幾個立方體按照一定的時間間隔沿著X 軸進行旋轉就實現了3D 切割輪播圖的效果。

3 3D切割輪播圖的結構布局

3.1 結構分析[2]

圖1：切換前

圖2：3D 切割圖片切換中

圖3：切換后

顯示圖片的區域設置為一個盒子view，本文把每張圖片分成5列顯示，因為這5 列的結構和樣式都相同，我們設置一個無序列表ul，在其中設置5 個li 來表示這5 列，每一列包含了4 張圖片，可以使用4 個行內元素span 來表示每個li 中的四張圖片，這四張圖片的位置都是相同的，占滿了這一列。在view 中設置兩個按鈕用來進行圖片切換，點擊切換按鈕時將執行js 代碼。設置結構的代碼如下：

3.2 整體布局設置

對盒子View 進行樣式設置，設置大小和邊框，后邊兩個播放按鈕需要進行定位，此處需要對view 在頁面中的位置進行設置。view 的大小和每張輪播的大圖尺寸相同，此處使用圖片的大小為640*400。

圖片總寬度640px，共分成5 列，每列的寬度相同，因此每個li 設置寬度為128px，高度和盒子view 的高度相同，因為所有的li在一行，要進行浮動。對于圖片的旋轉播放是利用CSS3 的3D 旋轉效果實現，需要對li 設置3D 變換，并設置其漸變屬性。

li 中的每個span，需要設置位置和大小，尺寸和父盒子li 的尺寸相同，對其進行絕對定位，占滿父盒子。

3.3 3D旋轉圖片設置

把li 中的四個span 分別設置為立方體的前面、上面、后面、下面，圖片分別設置為span 的背景圖，四張圖片就構成了一個立方體。具體操作是使用CSS3 提供的偽元素選擇器:nth-child(n)[3]，依次找到li 的每個span 元素，對其進行背景設置和3D 轉換。對span 分別進行如下設置：

第1 個span 的設置：該span 作為立方體的前面，沿Z 軸正方向移動200px(圖像高度的一半)；把第1 張輪播圖設置為第1 個span 的背景。

第2 個span 的設置：該span 作為立方體的上面，先沿X 軸順時針旋轉90 度，然后沿Z 軸正方向移動200px；把第2 張輪播圖設置為第2 個span 的背景。

第3 個span 的設置：該span 作為立方體的后面，先沿X 軸順時針旋轉180 度，然后沿Z 軸正方向移動200px；把第3 張輪播圖設置為第3 個span 的背景。

第4 個span 的設置——該span 作為立方體的下面，先沿X 軸順時針旋轉270 度，然后沿Z 軸正方向移動200px；把第4 張輪播圖設置為第4 個span 的背景。

3.4 切割效果實現

切割效果通過設置li 中span 背景圖片的水平位置來實現。View 寬度為640px，包含5 個li，每個li 的寬度是128px，所有li中span 背景圖片垂直方向的坐標都設置為0，即top 值為0，上邊與view 的上邊重合，把第1 個li 中span 背景圖片水平方向設置為0，即背景圖像位于li 的左上角。第2 個li 中span 背景圖片水平方向設置為-128px，即比li 的左邊界左移128px，后邊第3、4、5 個li中span背景圖片水平方向坐標分別設置為-256px，-384px，-512px。經過設置，在第2、3、4、5 個li 中分別顯示背景圖片的第二、三、四、五列，實現了圖片切割效果。

3.5 播放按鈕樣式設置

用于切換的輪播按鈕分別列于view 圖片盒子的左側和右側，垂直方向：居中。設置代碼如下：

4 使用jQuery技術實現3D切割輪播圖交互效果

4.1 jQuery技術簡介

jQuery 是一個JavaScript 函數庫，其設計理念是讓用戶寫最少的代碼，做最多的事情（write less,do more）。jQuery 封裝了常用的JavaScript 代碼，提供了一種簡便的JavaScript 設計模式，優化了HTML 文檔操作、事件處理和CSS 設計。使用jQuery 可以更加方便、快速地實現豐富的頁面交互效果。jQuery 庫不需要復雜的安裝，只需要把下載的jQuery 庫文件放到站點中，然后導入到頁面即可[4]。

4.2 3D切割輪播圖交互效果實現

布局中把四張圖片分別作為li 的前、上、后、下四個面，把li沿著X軸旋轉從而實現四張圖片的旋轉播放。分別給“prev”和“next”兩個按鈕添加點擊事件。每次點擊 “next”按鈕，代表圖片切片的5 個li 將依次沿X 軸逆時針旋轉90 度，每次單擊“prev”按鈕，代表圖片切片的5 個li 將依次沿X 軸順時針旋轉90 度。為實現圖片多次旋轉切換，設置一個全局循環控制變量current，通過current值改變li 的旋轉角度，實現多次旋轉播放。

jQuery 為其對象定義了each()方法，實現對jQuery 對象進行遍歷，并在每個匹配的元素上調用回調函數。具體使用格式：$(selector).each(function(index,element))。function(index,element) 是為每個匹配元素規定運行的函數，index 表示選擇器的 index 位置，element 代表當前的元素（也可使用 "this" 選擇器）[5]。此處利用選擇器的編號index 控制li 的旋轉延遲，通過設置element 的CSS 屬性完成圖片的旋轉。Li 的旋轉延遲設置——給li 的transform 變換設置transition-delay 屬性值為：index*0.25，即第0、1、2、3、4個li 的旋轉時間分別延遲：0 秒、0.25 秒、0.50 秒、0.75 秒和1 秒，1 秒完成一次完整圖片的旋轉。具體代碼如下：

5 結語

本文利用HTML、CSS3 和jQuery 技術完成了3D 切割輪播圖從布局到運行的總體實現，實現難點在布局設置。本文使用幾個小塊拼成了一幅整圖，并不是直接使用一張大圖。平時在網頁中看到的由若干個碎片組成的圖片變換效果也是采用的這種思想，每個小塊用一個小的div 表示，每個div 中顯示圖片的不同部分，通過改變div 的布局形成圖片碎了的效果，其實并不是真正對大圖進行切割，這是在網頁設計中常用的小技巧。

隨著CSS3 和jQuery 技術對各種瀏覽器兼容性的提高，可以在Web 頁面中實現更加炫麗的動態效果，用戶對網頁瀏覽流暢性和舒適性體驗要求的提升也對Web 前端開發人員不斷提出新挑戰。