基于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 前端开发人员不断提出新挑战。