3D效果切割轮播图
Posted 不想掉头发啊！！
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3D效果切割轮播图相关的知识，希望对你有一定的参考价值。
1.难点分析
1.1如何对结构进行布局
此次代码采用的是div>ul>li>span结构。其中每一个li元素所代表的是一个结构块，而每一个span元素所代表的是这个结构中的某一个面，来显示图片。
1.2如何解决连续单击下一张时出现bug
对于连续单击下一张图片时出现的bug,此代码采用添加节流阀来解决。在代码中添加一个setTimeout函数，并将其设置为每1s执行flag=true。同时在相应的点击事件执行前设置判断语句，若flag=true（上文已设置flag=true）则执行点击事件并将flag的值设置为false
2.代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.view{
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
}
ul{
width: 100%;
height: 100%;
list-style: none;
transform: rotate3d(1,1,0,-30deg);
transform-style: preserve-3d;
}
ul li{
width: 20%;
height: 100%;
background-color: #ccc;
float: left;
position: relative;
transform-style: preserve-3d;
transition: transform 0.5s;
}
ul li span{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
ul li span:nth-of-type(1){
background-image: url(../img/animation1.jpeg);
transform:translateZ(150px);
}
ul li span:nth-of-type(2){
background-image: url(../img/animation2.jpeg);
transform:translateY(-150px) rotateX(90deg);
}
ul li span:nth-of-type(3){
background-image: url(../img/animation3.jpeg);
transform:translateZ(-150px) rotateX(180deg);
}
ul li span:nth-of-type(4){
background-image: url(../img/animation4.jpeg);
transform:translateY(150px) rotateX(-90deg);
}
/*
设置每一个li元素的span所显示的图片的位置
*/
ul li:nth-of-type(2) span{
background-position: -100% 0;
}
ul li:nth-of-type(3) span{
background-position: -200% 0;
}
ul li:nth-of-type(4) span{
background-position: -300% 0;
}
ul li:nth-of-type(5) span{
background-position: -400% 0;
}
.pre , .next{
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
position: absolute;
top: 50%;
text-decoration: none;
font-size: 40px;
transform: translate(0,-50%);
background-color: rgba(0,0,0,.1);
color: #fff;
}
.pre{
left: 0;
}
.next{
right: 0;
}
</style>
</head>
<body>
<div class="view">
<ul>
<!-- 每一个li就是一个结构块-->
<li>
<!-- 每一个span是这个结构中的某一个面，来显示图片-->
<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>
<a href="javascript:;" class="pre"><</a>
<a href="javascript:;" class="next">></a>
</div>
<script src="./jquery-3.5.1.min.js"></script>
<script>
$(function (){
// 定义图片索引
var index = 0;
// 添加节流阀 true说明本次单击会有响应处理
var flag = true;
// 下一张
$(".next").on("click",function (){
if(flag==true){
//设置节流阀
flag = false;
index--;
// 下一张就是将所有的li元素围绕x旋转
$('li').each(function (key,value){
// 通过添加transform样式进行旋转
$(this).css({
"transform":"rotateX("+(index*90)+"deg)",
'transition-delay':(key*0.2)+'s'
});
});
setTimeout(function (){
flag = true
},1000)
}
});
// 上一张
$(".pre").on("click",function (){
if(flag==true){
//设置节流阀
flag = false;
index++;
// 下一张就是将所有的li元素围绕x旋转
$('li').each(function (key,value){
// 通过添加transform样式进行旋转
$(this).css({
"transform":"rotateX("+(index*90)+"deg)",
'transition-delay':(key*0.2)+'s'
});
});
setTimeout(function (){
flag = true
},1000)
}
});
});
</script>
</body>
</html>
3.效果图
有需要可以点击下载资源下载
以上是关于3D效果切割轮播图的主要内容，如果未能解决你的问题，请参考以下文章