CSS3+JS切割轮播图

以下说明数据，是指有4张图片的轮播图，分别切割成4张。

首先，做成单张切换的立体效果，即通过旋转，确定四张图片的位置，分别是一个立方体的上下前后的图片翻转移动角度。

		.box ul li:nth-child(1){
			transform:rotateX(90deg) translateZ(190px);
		}
		.box ul li:nth-child(2){
			transform:rotateX(-90deg) translateZ(190px);
		}
		.box ul li:nth-child(3){
			transform:translateZ(190px);
		}
		.box ul li:nth-child(4){
			transform:rotateX(180deg) translateZ(190px);
		}

　　

其次，切割轮播图的原理并不是将一个图片切割成4张，而是通过flex伸缩布局调整4张图片的位置，并调整图片位置，使得看起来像一张图片，通过设置过渡延迟来实现切割效果。

		.box {
			width: 560px;
			height: 380px;
			border: 1px solid #000;
			margin: 100px auto 0;
			/* 让这个盒子成为一个伸缩容器
			一旦盒子成为了伸缩容器，里面所有的子元素都会自动成为项目 项目默认呈现水平排列 一旦水平排列就会超出box，所以，flex-shrink：1自动就会收缩每一个UL，最终的结果就是一个UL占的box的1/4
			*/
			display: flex;
		}
		.box ul {
			width: 560px;
			height: 380px;
			position: relative;
			transform-style:preserve-3d;
			transform:rotateX(0deg);
			transition:transform 1s;
		}
		.box ul li {
			/* 这里的LI设置成百分之百分宽高，为的是继承缩放后的UL的宽度 */
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			/* 在这里添加overflow：hidden */
			overflow: hidden;
		}
		/* 给每一个UL添加延迟时间 */
		.box ul:nth-child(2){
			transition-delay: 0.2s;
		}
		.box ul:nth-child(3){
			transition-delay: 0.4s;
		}
		.box ul:nth-child(4){
			transition-delay: 0.6s;
		}
		/* 让每一个UL下面的图片都往左走 */
		.box ul:nth-child(2) img{
			margin-left: -140px;
		}
		.box ul:nth-child(3) img{
			margin-left: -280px;
		}
		.box ul:nth-child(4) img{
			margin-left: -420px;
		}

　　最后，通过JS的遍历来分别给每个按钮、每个ul注册事件，并通过添加 节流阀来控制轮播图的进度

<script type="text/javascript">
	// 需求 ：点击按钮让UL进行旋转 每一次点击累加一个90的角度

	//（１）找对象
	var box = document.querySelector('.box');
	var _ul = box.querySelectorAll('ul');
	var btns = document.querySelectorAll('button');
	// （2）给右边的按钮绑定点击事件 每点击一次让Ul基于之前的角度在加上一个90
	var num = 0; // 模拟信号量
	// 设置一个flag变量
	var flag = true;
	// 整体绑定
	for(var i = 0; i < btns.length; i++){

		// 设置自定义属性
		btns[i].setAttribute('data-index', i);

		btns[i].addEventListener('click',function(){
			if(flag){
				// 关门
				flag = false;
				// 判断当前点击的是哪一个对象
				// 通过this去拿到当前的那个对象的data-index
				var index = this.dataset['index'];
				// 不能用全等 因为一个是字符串一个是数值型
				if(index == 1){
					num++;
				}else if(index == 0){
					num--;
				}
				console.log(num*90);
				// _ul.style.transform = 'rotateX('+num*90+'deg)';
				// 让所有的UL转起来
				for(var i = 0; i < _ul.length; i++){
					_ul[i].style.transform = 'rotateX('+num*90+'deg)';
				}
			}
		})
	}
	// 当用户暴力点击的时候，会出现过渡来不及的BUG 解决方案：函数节流
	// 当最后一个UL的过渡执行完毕之后重新开门
	_ul[_ul.length - 1].addEventListener('transitionend',function(){
		console.log(1);
		// 开门
		flag = true;

　　　　})