百葉窗效果輪播圖的設(shè)計與實現(xiàn)

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

關(guān)鍵詞：輪播圖；百葉窗效果；HTML5；CSS3；JavaScript

中圖分類號：TP311.1 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2024）17-0059-03 開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID） ：

0 引言

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

1 百葉窗效果輪播圖原理

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

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

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

2 設(shè)計與實現(xiàn)

輪播圖的制作主要包含網(wǎng)頁結(jié)構(gòu)、樣式控制、輪播行為及交互方式[1]。網(wǎng)頁結(jié)構(gòu)可以使用HTML5來呈現(xiàn)，樣式控制通過CSS3來實現(xiàn)，輪播行為及交互方式則通過JavaScript來完成。

2.1 輪播圖的結(jié)構(gòu)和樣式

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

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

<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 輪播行為

輪播圖片間的一次輪播過程和原理已經(jīng)通過前文分析得很清晰。輪播圖片間的往復(fù)自動輪播是通過定時器實現(xiàn)的[3]，為了讓圖片自動輪播，可以給定時器設(shè)置一個間隔時間，讓輪播圖片每隔一定時間自動實現(xiàn)一次輪播效果。而輪播行為的具體實現(xiàn)需要通過JavaScript 獲取相關(guān)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 交互行為

動態(tài)圖形的交互設(shè)計需要遵循便捷的應(yīng)用原則[9]。輪播圖實際上是一種動態(tài)圖，當(dāng)輪播圖動態(tài)展示圖片給用戶時，如果用戶對所展示的圖片信息感興趣，可以通過一個超鏈接讓用戶點擊訪問進一步的詳細(xì)信息，這種情況可以通過在輪播圖網(wǎng)頁結(jié)構(gòu)中用a 標(biāo)簽來包裹img標(biāo)簽實現(xiàn)。另一種交互是當(dāng)用戶觀看輪播圖時，如果對圖片上的信息感興趣，鼠標(biāo)移動到圖片上時應(yīng)暫停輪播行為讓用戶仔細(xì)觀看圖片信息，待鼠標(biāo)移出后繼續(xù)輪播行為。對于這種交互行為，可以通過清除定時器來實現(xiàn)暫停輪播效果，待鼠標(biāo)移出后再次執(zhí)行定時器來繼續(xù)輪播，相關(guān)代碼如下：

carousel.onmouseenter = function （） {

clearInterval（timer）;

}

carousel.onmouseleave = function （） {

clearInterval（timer）;

timer = setInterval（autoCarousel， 5000）;

}

還有一種交互是給輪播圖設(shè)置指示器，該指示器的功能主要是展示輪播圖片的張數(shù)和輪播圖片的跳轉(zhuǎn)，一般用小圓點或數(shù)字來實現(xiàn)。當(dāng)圖片輪播時，指示器會隨著圖片的切換進行一些動畫切換。此外，當(dāng)用戶點擊指示器中的某一個小圓點或數(shù)字時，輪播圖會跳轉(zhuǎn)到指示器所代表的圖片上。本文用小圓點來實現(xiàn)輪播圖指示器，放在輪播圖中間偏下的位置，放在網(wǎng)頁中類名為carousel的盒子中。當(dāng)圖片輪播時，當(dāng)前展示的圖片所對應(yīng)的指示器呈現(xiàn)一個橢圓形，其余的呈圓形。實現(xiàn)的原理是遍歷指示器的li節(jié)點，如果當(dāng)前節(jié)點的data-n 屬性值與輪播圖的索引idx 相等，就添加一個current的類名，否則去掉，這樣只須設(shè)置一個current 的類來控制橢圓形樣式。指示器的HTML結(jié)構(gòu)、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 = ′′;

}}}

通過點擊指示器小圓點來實現(xiàn)圖片的跳轉(zhuǎn)切換的交互可以通過事件監(jiān)聽實現(xiàn)。在事件捕獲時需要重新排序圖片，可以在輪播圖輪播前對圖片的節(jié)點列表進行復(fù)制，獲取初始圖片順序。當(dāng)點擊小圓點時，先將當(dāng)前遮罩層的背景圖設(shè)置為點擊時的頂層圖片，再清空輪播圖片。根據(jù)小圓點的data-n值從復(fù)制的節(jié)點列表中取節(jié)點，然后追加到輪播圖父節(jié)點的末尾，從而形成點擊后的圖片順序調(diào)整。再調(diào)用相關(guān)函數(shù)實現(xiàn)百葉窗效果輪播，就完成了圖片跳轉(zhuǎn)。相關(guā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）

}

完成百葉窗效果輪播圖的網(wǎng)頁結(jié)構(gòu)、樣式控制、輪播行為及交互方式的設(shè)計和實現(xiàn)后，整體效果如圖3所示。

3 結(jié)束語

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

參考文獻(xiàn)：

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

[2] 雷穎，林語涵.輪播圖滑動方向和產(chǎn)品朝向?qū)οM者沖動購買意愿的影響研究[J].全國流通經(jīng)濟，2023（16）：8-12.

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

[4] 馬寧寧.網(wǎng)頁中實現(xiàn)輪播圖的簡易方法探討[J].電腦知識與技術(shù)，2021，17（5）：22-25.

【通聯(lián)編輯：謝媛媛】