jquery 实现3d切割轮播图

  总结： 1.布局时4张图片分别为一个立体长方体的4个侧面，屏幕为该长方体的几何中心。

　　　　2.注意点击左按钮，显示上一张图片，沿X轴旋转的是 90deg,  右按钮，则为 90deg

 　　　　3.切割效果通过li过渡延时来实现，通过节流阀控制过渡完成的时间点，也就是下次点击事件可以触发的时间点。

 效果图：

     

1.html:

<!--3d立体轮播图-->
<section class="box">
<ul class="imageBox">
<!--把宽度分为5个部分-->
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>

</ul>
<!--转义符 \ 实体：$lt;-->
<a href="javascript:;" class="left">&lt; </a>
<a href="javascript:;" class="right">&gt; </a>
</section>

2.css样式：

<style>
* {
margin: 0;
padding: 0;
}

.box {
560px;
height: 300px;
margin: 100px auto;
position: relative;
/*overflow: hidden;*/
}

.box .imageBox {
list-style: none;
100%;
height: 100%;

}

.imageBox li {
position: relative;
float: left;
112px;
height: 100%;
/*视距属性 近大远小*/
/*perspective: 500px;*/
/*3d呈现*/
transform-style: preserve-3d;
transition: all 1s linear;
}

.imageBox li span {
100%;
height: 100%;
position: absolute;
top: 0;
left: 0;

}

/*image 同一个li下不同span样式*/
.imageBox li span:nth-child(1) {
transform: translateZ(150px);
background: url("images/1.jpg") no-repeat;
}

.imageBox li span:nth-child(2) {
transform: rotateX(90deg) translateZ(-150px);
background: url("images/2.jpg") no-repeat;

}

.imageBox li span:nth-child(3) {
transform: rotateX(180deg) translateZ(150px);
background: url("images/3.jpg") no-repeat;

}

.imageBox li span:nth-child(4) {
transform: rotateX(270deg) translateZ(150px);
background: url("images/4.jpg") no-repeat;

}

/*imageBox 不同li下 span样式*/
.imageBox li:nth-child(1) span {
background-position: 0 0;
}

.imageBox li:nth-child(2) span {
background-position: -112px 0;
}

.imageBox li:nth-child(3) span {
background-position: -224px 0;
}

.imageBox li:nth-child(4) span {
background-position: -336px 0;
}

.imageBox li:nth-child(5) span {
background-position: -448px 0;
}

/*左右焦点样式*/
.box .left, .box .right {
position: absolute;
50px;
height: 70px;
background-color: rgba(0, 0, 0, .3);
line-height: 70px;
top: 50%;
display: block;
color: #fff;
font-size: 24px;
text-align: center;
text-decoration: none;
font-weight: bold;
margin-top: -35px;
}

.box .right {
right: 0;
}
</style>

3.基于jquery的js代码：

<script src="js/jquery-1.12.4.min.js"></script>
<script>
<!--javascript代码-->

$(function () {
/*1.设置索引
* 2. 给左右按钮注册点击事件
* 3. 沿x轴旋转
* 4. 节流阀控制动画完成下一次动画才可以开始*/
// 先关闭一次定时器，以为默认鼠标在box元素外，不关闭则开启了两个定时器
clearInterval(timeId);
var index = 0;
var flag=true;
$('.left').on('click', function () {
if(!flag) return;
flag=false;
index--;
var angel = -index * 90;
$('li').css('transform', 'rotateX(' + angel + 'deg)').each(function (i, item) {
$(this).css('transition-delay',i*0.25+"s");
})
});
$('.right').on('click', function () {
if(!flag) return;
flag=false;
index++;
var angel = -index * 90;
$('li').css('transform', 'rotateX(' + angel + 'deg)').each(function (i, item) {
$(this).css('transition-delay',i*0.25+"s");
})
});
// 做过渡完成后时间判断
$('.imageBox li:last').on('transitionend',function () {
flag=true;
});
// 定时播放
var timeId=setInterval(function(){
$('.box .right').trigger('click');
},2000);
// 当鼠标进入box容器，停止定时器
$('.box').on('mouseenter',function(){
clearInterval(timeId);
})
// 当鼠标离开box容器，开启定时器
$('.box').on('mouseleave',function(){
timeId=setInterval(function(){
$('.box .right').trigger('click');
},3000);
})

})
</script>