带锁的3D切割轮播图
Posted 奋斗的小小牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了带锁的3D切割轮播图相关的知识，希望对你有一定的参考价值。
3D切割轮播图。 加入锁，限制点击太快次数
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
.view{
width: 560px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
width: 112px;
height: 300px;
float: left;
position: relative;
line-height: 300px;
text-align: center;
transform-style: preserve-3d;
transition: all 1s;
}
li span{
position: absolute;
top:0;
left:0;
width: 100%;
font-size: 40px;
}
li span:nth-child(1){
transform: translateZ(150px);
/*background-color: palegoldenrod;*/
background: url("./images/1.jpg") no-repeat;
}
li span:nth-child(2){
transform: translateY(-150px) rotateX(90deg);
/*background-color: paleturquoise;*/
background: url("./images/2.jpg") no-repeat;
}
li span:nth-child(3){
transform: translateZ(-150px) rotateX(180deg);
background: url("./images/3.jpg") no-repeat;
/*background-color: papayawhip;*/
}
li span:nth-child(4){
transform: translateY(150px) rotateX(270deg);
background: url("./images/4.jpg") no-repeat;
/*background-color: peru;*/
}
li:nth-child(2) span{
background-position: -112px;
}
li:nth-child(3) span{
background-position: -224px;
}
li:nth-child(4) span {
background-position: -336px;
}
li:nth-child(5) span{
background-position: -448px;
}
/*按钮*/
.prev, .next {
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
margin-top: -30px;
font-size: 40px;
color: #FFF;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 50%;
}
.next {
right: 0;
}
</style>
</head>
<body>
<div class="view">
<ul>
<li>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</li>
<li>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</li>
<li>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</li>
<li>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</li>
<li>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</li>
</ul>
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
<script src="./js/jquery.min.js"></script>
<script>
var flag=false;
var current=0;
$(".prev,.next").on("click",function (){
if(flag){
return;
}
flag=true;
if($(this).hasClass("prev")){
current++;
//干掉其他的Li
$("li").css("transform","rotateX("+(current*90)+"deg)");
$("li").each(function (e){
// console.log(e);
$(this).css("transition-delay",(e*0.25)+"s");
})
}else{
current--;
$("li").css("transform","rotateX("+(current*90)+"deg)");
$("li").each(function (e){
// console.log(e);
$(this).css("transition-delay",(e*0.25)+"s");
})
}
});
$("li:nth-last-child(1)").on("webkitTransitionEnd",function (){
// console.log(1);
flag=false;
});
</script>
</div>
</body>
</html>
以上是关于带锁的3D切割轮播图的主要内容，如果未能解决你的问题，请参考以下文章