百叶窗效果轮播图的设计与实现

摘要：轮播图是网页设计中经常使用的一种重要特效，常见的轮播图切换方向是水平方向上的切换。随着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.

【通联编辑：谢媛媛】