百葉窗效果輪播圖的設計與實現

摘要：輪播圖是網頁設計中經常使用的一種重要特效，常見的輪播圖切換方向是水平方向上的切換。隨著HTML5、CSS3和JavaScript的技術發展，可以為網頁元素實現3D變換，從而實現一種立體視覺上的輪播圖切換方案。通過對百葉窗輪播效果的分析，搭建了輪播圖的網頁架構，并通過perspective、transform、transition等樣式控制以及JavaScript對DOM元素的操作，實現了輪播行為及交互行為，創作出一種3D視覺輪播效果，提供了一種新的展示圖片的輪播方案。

關鍵詞：輪播圖；百葉窗效果；HTML5；CSS3；JavaScript

中圖分類號：TP311.1 文獻標識碼：A

文章編號：1009-3044（2024）17-0059-03 開放科學（資源服務）標識碼（OSID） ：

0 引言

輪播圖是在網頁特定區域內將若干圖片定時切換，從而實現輪流播放不同圖片的一種網頁特效[1]。隨著Web技術的發展，輪播圖已漸漸被大量運用在網頁設計中。輪播圖輪流播放不同圖片的特性不僅可以凸顯網站運營者想公開的重要信息，而且還可以吸引訪問者的注意。在電子商務領域，有研究發現輪播圖是消費者獲取產品信息的重要渠道，甚至影響消費者沖動購買的意愿[2]，由此可見輪播圖的重要性。常見的輪播圖切換方向是左右方向上的切換[3]，即一種平面上的效果，但CSS3中引入了transform屬性后，使得HTML中的元素可以實現3D變換。CSS3的這一特性也使網頁設計者可以設計一種有別于傳統左右方向的輪播方式。

1 百葉窗效果輪播圖原理

現實中，百葉窗是一種窗戶式樣，由一系列的葉片組成，可以遮擋陽光并能根據葉片的調整角度來調節室外入射光線。網頁可以根據百葉窗這一特性設計仿百葉窗的輪播效果，通過調整葉片來實現圖片的輪播，具體視覺效果過程如圖1所示。

制作輪播圖需要理清輪播圖的具體實現步驟才能通過編程實現[4]。由圖1可知，仿百葉窗效果輪播圖需要將圖片堆疊在一起，且只能看到頂層的圖片。輪播時，讓頂層的圖片產生切片，形成百葉窗葉片的視覺效果，再進行翻轉，從而露出下層的圖片。當頂層圖片翻轉完成后，需要調整圖片順序，讓原來的頂層圖片變成最底層圖片，而露出的下層圖片成為新的頂層圖片。通過不斷重復這一過程，形成循環輪播，最終實現仿百葉窗的輪播效果。

常見的輪播圖制作方法主要有HTML5+CSS3+Ja?vaScript、HTML5+CSS3+jQuery 和HTML5+CSS3[4]。Ja?vaScript是Web開發中不可或缺的技術，能有效保障Web開發中的功能設計[5]。網頁中常常需要與訪問者進行行為交互，因此僅僅依靠HTML5和CSS3無法滿足實際開發需求。隨著瀏覽器版本的不斷更迭和其對ES6+的支持度的提升，jQuery的兼容性優勢已不再那么明顯，因此本文將采用HTML5、CSS3和JavaScript 作為輪播圖的制作方法。

2 設計與實現

輪播圖的制作主要包含網頁結構、樣式控制、輪播行為及交互方式[1]。網頁結構可以使用HTML5來呈現，樣式控制通過CSS3來實現，輪播行為及交互方式則通過JavaScript來完成。

2.1 輪播圖的結構和樣式

通過對百葉窗效果輪播圖視覺效果的分析可知，待輪播的圖片是堆疊在一起放置的。為了實現堆疊效果，需要給圖片設置z-index屬性。輪播圖的圖片位置主要通過相對定位和絕對定位來實現[6]。而要對頂層圖片進行切片，一種簡便的仿切片效果是使用遮罩層，即通過在遮罩層中放置數量不等的盒子來模擬百葉窗的葉片。遮罩層的優點是可以使圖像被遮罩從而無法被看見[7]。為了保證遮罩層的通透性以顯露被遮罩的圖片，在圖片輪播前將遮罩層設為不可見。輪播啟動后，先將遮罩層中葉片盒子的背景圖設置為當前的頂層圖片，再將當前的頂層圖片調整為輪播圖的底層圖片，把遮罩層設為可見并根據盒子的數量設置背景圖的位置。將葉片盒子下邊框顏色設為白色，從而在視覺上模擬輪播圖片被切片。通過CSS3的動畫屬性模擬葉片翻轉效果，等翻轉完成后再將遮罩層設為不可見，從而完成一次圖片輪播。最終，用戶在視覺效果上就產生了類似百葉窗翻轉的輪播效果。添加遮罩層后的輪播圖視覺過程如圖2所示。

為使輪播圖的圖片顯示效果最佳，最好統一輪播圖的圖片大小[8]，因此將圖片的寬高均設置為664×442 像素。百葉窗效果需要將葉片翻轉，可以使用CSS3 的transform屬性并設置rotateX值讓“葉片”沿著X軸進行3D旋轉。為配合3D旋轉，還要為葉片的父盒子設置perspective屬性，從而使葉片獲得透視效果以查看到3D旋轉效果。翻轉的具體過程可以通過過渡屬性transition來實現。百葉窗效果輪播圖的網頁結構和樣式如下：

<div class="carousel">

<div class="mask">

<div></div>

<div></div>

<div></div>

<div></div>

</div>

<div class="pics">

<img src="img/01.jpg" >

<img src="img/02.jpg" >

<img src="img/03.jpg" >

</div>

</div>

.carousel {width： 664px;height： 442px;overflow： hid?den;position： relative;}

.carousel .mask {width： 100%; height： 100%;posi?tion： absolute; z-index： 9999;perspective： 1000px;}

.carousel .mask div {width： 100%;height： 25%;boxsizing：border-box; overflow： hidden; transition： trans?form .5s linear 0s; position： relative;}

.carousel .mask div：nth-child（1），.carousel .mask div：nth-child（2），. carousel . mask div： nth-child（3） {borderbottom：1px solid #fff;}

. carousel . mask div： nth-child（2） {backgroundposition：0 33%;}

. carousel . mask div： nth-child（3） {backgroundposition：0 66%;}

. carousel . mask div： nth-child（4） {backgroundposition：0 99%;}

img {width： 100%;position： absolute;top： 0;left： 0;}

img：nth-child（1） {z-index： 300;}

img：nth-child（2） {z-index： 200;}

img：nth-child（3） {z-index： 100;}

2.2 輪播行為

輪播圖片間的一次輪播過程和原理已經通過前文分析得很清晰。輪播圖片間的往復自動輪播是通過定時器實現的[3]，為了讓圖片自動輪播，可以給定時器設置一個間隔時間，讓輪播圖片每隔一定時間自動實現一次輪播效果。而輪播行為的具體實現需要通過JavaScript 獲取相關DOM 元素來完成，具體代碼如下：

const carousel = document. getElementsByClass?Name（′carousel′）[0];

const pics = document. getElementsByClassName（′pics′）[0];

const imgs = pics.getElementsByTagName（′img′）;

const maskLayer = document.querySelector（′.carou?sel .mask′）;

const masks = maskLayer.querySelectorAll（′div′）;

function initMaskBackground（） {

for （const mask of masks） {

mask.style.backgroundImage = `url（${imgs[0].getAt?tribute（′src′）}）`;

}}

function showMaskLayer（） {

maskLayer.style.visibility = ′visible′;

}

function hideMaskLayer（） {

maskLayer.style.visibility = ′hidden′;

}

window.onload = function （） {

hideMaskLayer（）;

initMaskBackground（）;

}

function autoCarousel（） {

const cloneImg = imgs[0].cloneNode（）;

pics.appendChild（cloneImg）;

pics.removeChild（imgs[0]）;

showMaskLayer（）;

for （const mask of masks） {

mask.style.transform = ′rotateX（90deg）′;

}

setTimeout（function （） {

for （const mask of masks） {

hideMaskLayer（）;

initMaskBackground（）;

mask.style.transform = ′none′;

setCircles（idx）;

}

}， 500）

idx++;

}

let timer = setInterval（autoCarousel， 5000）;

2.3 交互行為

動態圖形的交互設計需要遵循便捷的應用原則[9]。輪播圖實際上是一種動態圖，當輪播圖動態展示圖片給用戶時，如果用戶對所展示的圖片信息感興趣，可以通過一個超鏈接讓用戶點擊訪問進一步的詳細信息，這種情況可以通過在輪播圖網頁結構中用a 標簽來包裹img標簽實現。另一種交互是當用戶觀看輪播圖時，如果對圖片上的信息感興趣，鼠標移動到圖片上時應暫停輪播行為讓用戶仔細觀看圖片信息，待鼠標移出后繼續輪播行為。對于這種交互行為，可以通過清除定時器來實現暫停輪播效果，待鼠標移出后再次執行定時器來繼續輪播，相關代碼如下：

carousel.onmouseenter = function （） {

clearInterval（timer）;

}

carousel.onmouseleave = function （） {

clearInterval（timer）;

timer = setInterval（autoCarousel， 5000）;

}

還有一種交互是給輪播圖設置指示器，該指示器的功能主要是展示輪播圖片的張數和輪播圖片的跳轉，一般用小圓點或數字來實現。當圖片輪播時，指示器會隨著圖片的切換進行一些動畫切換。此外，當用戶點擊指示器中的某一個小圓點或數字時，輪播圖會跳轉到指示器所代表的圖片上。本文用小圓點來實現輪播圖指示器，放在輪播圖中間偏下的位置，放在網頁中類名為carousel的盒子中。當圖片輪播時，當前展示的圖片所對應的指示器呈現一個橢圓形，其余的呈圓形。實現的原理是遍歷指示器的li節點，如果當前節點的data-n 屬性值與輪播圖的索引idx 相等，就添加一個current的類名，否則去掉，這樣只須設置一個current 的類來控制橢圓形樣式。指示器的HTML結構、CSS和JavaScript控制代碼如下：

<ol class="circles" id="circle_ol">

<li data-n="0" class="current"></li>

<li data-n="1"></li>

<li data-n="2"></li>

</ol>

.carousel .circles {width： 80px; height： 20px; posi?tion： absolute; left： 50%; margin-left： -80px; bottom：10px; z-index： 99999;}

.carousel .circles li {float： left; width： 10px; height：10px; background-color： #fff; margin-right： 10px;border-radius： 10px; transition： all . 5s ease 0s; cursor：pointer; list-style： none;}

.carousel .circles li：last-child { margin-right： 0;}

.carousel .circles li.current {width： 20px;}

let idx = 0;

const circleOl = document. getElementById（′circle_ol′）;

const circleLis = circleOl. getElementsByTagName（′li′）;

function setCircles（num） {

if （num >= circleLis.length） {

idx = 0;

}

for （let i = 0; i < circleLis.length; i++） {

if （i == idx） {

circleLis[i].className = ′current′;

} else {

circleLis[i].className = ′′;

}}}

通過點擊指示器小圓點來實現圖片的跳轉切換的交互可以通過事件監聽實現。在事件捕獲時需要重新排序圖片，可以在輪播圖輪播前對圖片的節點列表進行復制，獲取初始圖片順序。當點擊小圓點時，先將當前遮罩層的背景圖設置為點擊時的頂層圖片，再清空輪播圖片。根據小圓點的data-n值從復制的節點列表中取節點，然后追加到輪播圖父節點的末尾，從而形成點擊后的圖片順序調整。再調用相關函數實現百葉窗效果輪播，就完成了圖片跳轉。相關代碼如下：

circleOl.onclick = function （e） {

if （e.target.tagName.toLowerCase（） == ′li′） {

const n = e.target.getAttribute（′data-n′）;

goToImg（n）;

setCircles（idx）;

}}

const imgsClone = [...imgs];

function goToImg（num） {

initMaskBackground（）;

if （idx == num） {

return;

}

pics.innerHTML = ′′;

for （let i = 0; i < imgsClone.length; i++） {

pics.appendChild（imgsClone[num]）;

num++;

if（num >= imgsClone.length） {

num = 0;

}}

showMaskLayer（）;

for （const mask of masks） {

mask.style.transform = ′rotateX（90deg）′;

}

idx = num;

for （const mask of masks） {

mask.style.transform = ′rotateX（90deg）′;

}

setTimeout（function （） {

for （const mask of masks） {

hideMaskLayer（）;

initMaskBackground（）;

mask.style.transform = ′none′;

setCircles（idx）;

}

}， 500）

}

完成百葉窗效果輪播圖的網頁結構、樣式控制、輪播行為及交互方式的設計和實現后，整體效果如圖3所示。

3 結束語

通過對百葉窗效果輪播圖的邏輯分析，利用HTML5完成了輪播圖結構的搭建，通過CSS3的設置，尤其是transform和transition屬性的應用，實現了樣式控制和動畫效果。通過JavaScript對DOM元素的控制和對輪播機制的模擬，最終實現了百葉窗效果輪播圖，呈現出一種有別于傳統水平左右方向上的輪播效果。在模擬葉片輪轉時，可以根據實際需求設定盒子數量。隨著葉片盒子數量的調整，也需要動態調整每個盒子背景圖的位置。

參考文獻：

[1] 余軍.運用JQuery制作網頁輪播圖特效[J].電腦編程技巧與維護，2023（11）：148-150.

[2] 雷穎，林語涵.輪播圖滑動方向和產品朝向對消費者沖動購買意愿的影響研究[J].全國流通經濟，2023（16）：8-12.

[3] 陳趙云.基于HTML5的Web站點設計與實現[J].現代信息科技，2023，7（6）：69-72.

[4] 馬寧寧.網頁中實現輪播圖的簡易方法探討[J].電腦知識與技術，2021，17（5）：22-25.

【通聯編輯：謝媛媛】