基于CSS3和jQuery技术3D切割轮播图的实现

电子技术与软件工程Electronic Technology & Software Engineering计算机与多媒体技术Computer And Multimedia Technology基于CSS3和jQuery技术3D切割轮播图的实现李燕华（北京市海淀区职工大学 北京市 100083）摘　要：本文详细介绍了利用CSS3和jQuery技术制作3D切割轮播图的制作思路和实现方法。轮播图作为一种观赏性很高的信息展示方式，在Web页面设计中得到广泛的应用。CSS3的3D转换技术为制作立体轮播图提供了可能，jQurey技术使得交互效果的实现更加简便。关键词：Web页面；CSS3；Query；3D切割轮播图轮播图是在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]显示图片的区域设置为一个盒子view，本文把每张图片分成5列显示，因为这5列的结构和样式都相同，我们设置一个无序列表[9]张利彪,周春光,刘小华等.粒子群算法在求解优化问题中的应用[J].吉林大学学报(信息科学版),2005,23(4):385-389.[10]陈贵敏,贾建援,韩琪.粒子群优化算法的惯性权值递减策略研究[J].西安交通大学学报,2006(01):53-56.[11]文展,唐康健,李文藻.一种改进粒子群优化算法在车辆路径问题的应用研究[J].重庆邮电大学学报(自然科学版),32(5):875.[12]余炳辉.粒子群优化算法试验研究及扩展[D].华中科技大学,

2007.[13]谢传聪.粒子群优化算法在车辆路径问题中的应用研究[D].2019.[14]牛仲新，胡敏.一种动态调整惯性权值的粒子群算法[J].工业控制计算机,2020,v.33(03):31-33.[15]常伯涛,范颖,赵书强等.基于改进粒子群算法的输电网扩展规划[J].华北电力大学学报(自然科学版)(4期),2018.[16]何启明.基于改进粒子群算法的多目标无功优化[D].西南交通大学,2009.[17]陈小全，张继红.基于改进粒子群算法的聚类算法[J].计算机研究与发展,2012,49(0z1):287-291.[18]卢峰,高立群.基于改进粒子群算法的优化策略[J].东北大学学报(自然科学版),2011,032(009):1221-1224.[19]赵志刚,张振文,石辉磊等.带扰动因子的自适应粒子群优化算法[J].计算机科学,2013,40(12):68-69,103[20]胡旺,李志蜀.一种更简化而高效的粒子群优化算法[J].软件学报,2007,18(004):861-868.作者简介马欣，硕士学位。研究方向为物流系统工程。闫莉（通讯作者），博士，教授。研究方向为工业系统工程、物流系统工程。Schaffer函数，Girewanks函数和Ackley函数用作测试函数，以测试改进算法的有效性，并对结果进行分析和比较。分析结果表明，引入改进的粒子释放和粒子速度动态速度变化来改进粒子群算法具有明显的优势。参考文献[1]Kennedy J，Eberhart R. Particle Swarm Optimization[C]//

Icnn95-international Conference on Neural ,2002.[2]Kumar D N，Reddy M J. Multipurpose Reservoir Operation

Using Particle Swarm Optimization[J]. Journal of Water

Resources Planning & Management,2007,2006(3).[3]Gill M K，Kaheil Y H， Khalil A，et al. Multiobjective

particle swarm optimization for parameter

estimation in hydrology[J]. Water Resources

Research,2006,42(7):257-271.[4]Zheng Y L，Ma L H， Zhang L Y，et al. Empirical study

of particle swarm optimizer with an increasing inertia

weight[C]// Congress on Evolutionary ,2003.[5]Sun，Jun, Wei, et al. Quantum-Behaved Particle

Swarm Optimization: Analysis of Individual Particle

Behavior and Parameter Selection.[J]. Evolutionary

Computation,2012.[6]许君,鲁海燕,石桂娟.限制速度粒子群优化和自适应速度粒子群优化在无约束优化问题中的应用[J].计算机应用,2015,35(3):668-674.[7]吴正科,杨青真,施永强等.带粒子释放和速度限制的粒子群算法[J].计算机应用研究,2013,30(003):682-683.[8]陈立华,蔡德所,梅亚东.动态速度限制粒子群算法及其应用[J].广西大学学报:自然科学版,2010(01):158-162.155

计算机与多媒体技术Computer And Multimedia Technology图1：切换前 图2：3D切割图片图3：切换后切换中ul，在其中设置5个li来表示这5列，每一列包含了4张图片，可以使用4个行内元素span来表示每个li中的四张图片，这四张图片的位置都是相同的，占满了这一列。在view中设置两个按钮用来进行图片切换，点击切换按钮时将执行js代码。设置结构的代码如下：

.view{ width: 640px; height: 400px; border: 1px solid #CCC; margin: 100px auto; position: relative; }图片总宽度640px，共分成5列，每列的宽度相同，因此每个li设置宽度为128px，高度和盒子view的高度相同，因为所有的li在一行，要进行浮动。对于图片的旋转播放是利用CSS3的3D旋转效果实现，需要对li设置3D变换，并设置其渐变属性。 .view ul{padding:0; margin: 0; list-style: none; } .view li{ width: 128px; height: 400px;156电子技术与软件工程Electronic Technology & Software Engineering float: left; position: relative; transform-style: preserve-3d; transition: all 1s; }li中的每个span，需要设置位置和大小，尺寸和父盒子li的尺寸相同，对其进行绝对定位，占满父盒子。 .view li span{ position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }3.3 3D旋转图片设置

把li中的四个span分别设置为立方体的前面、上面、后面、下面，图片分别设置为span的背景图，四张图片就构成了一个立方体。具体操作是使用CSS3提供的伪元素选择器:nth-child(n)[3]，依次找到li的每个span元素，对其进行背景设置和3D转换。对span分别进行如下设置：第1个span的设置：该span作为立方体的前面，沿Z轴正方向移动200px(图像高度的一半)；把第1张轮播图设置为第1个span的背景。.view li span:nth-child(1){ transform: translateZ(200px); background-image: url(./images/);

}第2个span的设置：该span作为立方体的上面，先沿X轴顺时针旋转90度，然后沿Z轴正方向移动200px；把第2张轮播图设置为第2个span的背景。 .view li span:nth-child(2){ transform: rotateX(90deg) translateZ(200px); background-image: url(./images/);

}第3个span的设置：该span作为立方体的后面，先沿X轴顺时针旋转180度，然后沿Z轴正方向移动200px；把第3张轮播图设置为第3个span的背景。 .view li span:nth-child(3){ transform: rotateX(180deg) translateZ(200px); background-image: url(./images/);

}第4个span的设置——该span作为立方体的下面，先沿X轴顺时针旋转270度，然后沿Z轴正方向移动200px；把第4张轮播图设置为第4个span的背景。 .view li span:nth-child(4){ transform: rotateX(270deg) translateZ(200px); background-image: url(./images/);

}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。

电子技术与软件工程Electronic Technology & Software Engineering经过设置，在第2、3、4、5个li中分别显示背景图片的第二、三、四、五列，实现了图片切割效果。 li:nth-child(1) span{ background-position: 0 0; } li:nth-child(2) span{ background-position: -128px 0; } li:nth-child(3) span{ background-position: -256px 0; } li:nth-child(4) span{ background-position: -384px 0; } li:nth-child(5) span{ background-position: -512px 0; }3.5 播放按钮样式设置

用于切换的轮播按钮分别列于view图片盒子的左侧和右侧，垂直方向：居中。设置代码如下： .prev, .next { display: block; width: 60px; height: 60px; text-align: center; line-height: 60px; margin-top: -30px; font-size: 40px; color: #FFF; text-decoration: none; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 50%; z-index: 100; } .next { right: 0; }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对象进行遍历，并在每个匹配的元素上调用回调函数。具体使用格式：Computer And Multimedia Technology计算机与多媒体技术$(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前端开发人员不断提出新挑战。参考文献[1]周芷仪,陈婷.浅谈网页中实现图片轮播图效果的方法[J].软件,2018,39(10):187-191.[2]王晓华.运用CSS和Java Script技术设计网页轮播图[J].科技视界,2017,28(057):88.[3]传智播客高教产品研发部编.HTML5+CSS3网站设计基础教程[M].人民邮电出版社,2016:113-114.[4]未来科技编.jQuery实战从入门到精通[M].中国水利水电出版社,2017:3-6.[5]. jQuery教程|菜鸟教程[OL] [2020-09-27]https:

///jquery/

[6]臧进进,鄂海红.基于响应式Web设计的网页生成系统研究与实现[J].软件,2015,36(6):37-41.作者简介李燕华，硕士研究生，讲师。研究方向为计算机应用技术、计算机专业教学、课程资源建设。157