3d切割轮播图

来源：互联网发布：java技术要学多久编辑：程序博客网时间：2024/06/05 09:49

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}

.view{
width: 560px;
height: 300px;
border: 1px solid #000;
margin:100px auto;
position: relative;
}

.view ul li{
width: 112px;
height:300px;
float: left;
position: relative;

/* 让里面的子盒子保持3d 效果*/

transform-style:preserve-3d;
transition:all 1s;

/*transform:rotateX(-45deg) rotateY(-27deg);*/
}

.view li span{
position: absolute;
width: 100%;
height: 100%;
}

.view li span:nth-child(1){
transform:translateZ(150px);
background-image: url(images/1.jpg);

}

.view li span:nth-child(2){
transform:rotateX(90deg) translateZ(150px);

background-image: url(images/2.jpg);
}

.view li span:nth-child(3){
transform:rotateX(180deg) translateZ(150px);
background-image: url(images/3.jpg);
}

.view li span:nth-child(4){
transform:rotateX(-90deg) translateZ(150px);
background-image: url(images/4.jpg);
}

.view li:nth-child(1) span{

}

.view li:nth-child(2) span{
background-position: -112px 0;
}
.view li:nth-child(3) span{
background-position: -224px 0;
}
.view li:nth-child(4) span{
background-position: -336px 0;
}
.view li:nth-child(5) span{
background-position: -448px 0;
}

/*左右按钮*/

.view .prev,.view .next{
position: absolute;
width: 80px;
height: 80px;
background-color: rgba(255,255,255,0.5);
text-align: center;
line-height: 80px;
font-size:50px;
color:red;
left:0;
top:50%;
/*margin-top:-40px;*/
transform:translateY(-50%);
text-decoration: none;
}

.view .next{
left:auto;
right:0;
}

</style>
</head>
<body>
<div class="view">
<ul>
<li>
1
2
3
4
</li>
<li>
1
2
3
4
</li>
<li>
1
2
3
4
</li>
<li>
1
2
3
4
</li>
<li>
1
2
3
4
</li>
</ul>
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
// 基本思路
// 定义变量记录当前播放的index
var index=0;

var isTransitionEnd=true;

// 当左箭头被点击是
$('.prev').click(function(){

if(isTransitionEnd){
index++;
//选择 90deg
var r=90*index;
isTransitionEnd=false;
$('li').css('transform','rotateX('+r+'deg)');

$('li').each(function(index,item){
// 设置动画的延迟间隔0.25秒
$(item).css('transition-delay',index*0.25+'s');
});
}
});
// 下一张
$('.next').click(function(){
// 如果上次过渡结束，执行下一次
if(isTransitionEnd){
// 索引值减小
index--;
// 选择 90deg
var r=90*index;
isTransitionEnd=false;

$('li').css('transform','rotateX('+r+'deg)');

$('li').each(function(index,item){
// 设置动画的延迟间隔0.25秒
$(item).css('transition-delay',index*0.25+'s');
});

}

});
// 只有最会一个li过渡结束才算轮播图过渡结束
$('li').eq(4).on('webkitTransitionEnd',function(){
isTransitionEnd=true;
})

})

</script>
</body>
</html>

阅读全文

0 0