HTML,CSS.JS切割轮播图

切割轮播图效果展示

切割轮播图效果展示视频链接

制作思路分析

一.轮播图轮播原理。
例如：我所做的四面轮播图

1.图片中的“1”，“2”，“3”，“4”对应的四个面分别放置一个图片。
2.上下翻转此正方体盒子，就形成了四个图片的切换。
3.轮播图的切割：就拿切割成两份来举例，把一张图片分别分为两半来显示，用两张一样的图片，第一张显示左半部分，另一张显示右半部分，然后拼接成一张图。

代码解析

第一步，创建标签：

1.建两个div，一个用来储存两个ul，另一个储存两个左右切换的button.
2.在两个ul中分别放四个用来储存照片的li，两个ul中的li储存的照片一一对应，才能实现"轮播图的切割"。

第二步，设置CSS样式：

3.#father设置宽，高与图片一样让图片高无缝衔接。
4.#father设置display:flex; 弹性盒子模型让两个子元素ul以最大限度地填充可用空间.
5.ul设置flex:1; 让两个ul平均分布在父级father中。
6.ul设置position:relative;相对定位与li设置的position:absolute;的绝对定位相对应，就是把li定位ul中。
7.ul设置transform-style: preserve-3d;实现3D动画效果。
8. li:nth-child(1)选中所有ul中的第一个li。
9. background: url(./images/5.jpg);加入图片./images/5.jpg。
10.transform: translateZ(225px);第一个li中的图片沿着Z轴移动225px;(css3 transform知识了解)
10. li:nth-child(2) 中的transform: rotateX(180deg) translateZ(225px);为第二个li中的图片沿着X轴旋转180度再沿着Z轴移动225px。
11. .right>li设置background-position-x: -400px;为设置背景图像的起始位置为沿着X轴向左移动400px，目的是让第二个ul中的图片显示右边一半图片

第三步：JS代码实现：

12.var sum=p*-90;为sum赋值一个当点击一次"上一张"按钮时sum就加个-90度；
13.left.style.transform = “rotateX(” + sum + “deg)”;为left的li中的css中的rotateX的值加上(" + sum + "deg)。
14.right.style.transition="all 1s .3s"为为left的li中的css加上transition属性第一个参数为“所有class=“right”中的li都拥有过渡属性”，第二个参数为“所有class=“right”中的li都拥有过渡时间为1s”,第三个参数为“所有class=“right”中的li都拥有过渡延迟2s触发”