总结: 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">< </a> <a href="javascript:;" class="right">> </a></section>2.css样式:
<style>
* { margin: 0; padding: 0; }.box {
width: 560px; height: 300px; margin: 100px auto; position: relative; /*overflow: hidden;*/ }.box .imageBox {
list-style: none; width: 100%; height: 100%;}
.imageBox li {
position: relative; float: left; width: 112px; height: 100%; /*视距属性 近大远小*/ /*perspective: 500px;*/ /*3d呈现*/ transform-style: preserve-3d; transition: all 1s linear; }.imageBox li span {
width: 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; width: 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>