首页 > 代码库 > H5C3结合JQuery实现的炫酷分裂式轮播图
H5C3结合JQuery实现的炫酷分裂式轮播图
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 560px;
height: 380px;
margin: 100px auto;
border: 1px solid #000;
position: relative;
display: flex;
}
.container a {
text-decoration: none;
position: absolute;
width: 60px;
height: 60px;
line-height: 60px;
font-weight:bold;">grey;
color: white;
text-align: center;
font-size: 60px;
top: 160px;
}
.before {
left: -30px;
}
.after {
right: -30px;
}
.items {
list-style: none;
padding: 0;
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: all 1s;
}
.item {
width: 100%;
height: 100%;
position: absolute;
}
.item:nth-child(1){
background: url(img/02.jpg);
transform: rotateX(0deg) translateZ(190px);
}
.item:nth-child(2){
background: url(img/03_kis.jpg);
transform: rotateX(180deg) translateZ(190px);
}
.item:nth-child(3){
background: url(img/04.jpg);
transform: rotateX(90deg) translateZ(190px);
}
.item:nth-child(4){
background: url(img/04_kiss.jpg);
transform: rotateX(-90deg) translateZ(190px);
}
.items:nth-child(2) .item {
background-position: -140px 0px;
}
.items:nth-child(3) .item {
background-position: -280px 0px;
}
.items:nth-child(4) .item {
background-position: -420px 0px;
}
</style>
<script src="http://www.mamicode.com/js/jquery-3.0.0.min.js"></script>
<script>
var num =0;
$(function(){
$(".before").click(function(){
num++;
$(".items").each(function(index,element){
setTimeout(function(){
$(element).css({
transform: "rotateX("+num*90+"deg)"
})
},index*100)
})
})
$(".after").click(function(){
num--;
$(".items").each(function(index,element){
setTimeout(function(){
$(element).css({
transform: "rotateX("+num*90+"deg)"
})
},index*100)
})
})
})
</script>
</head>
<body>
<div class="container">
<ul class="items">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<ul class="items">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<ul class="items">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<ul class="items">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<a href="javascript:void(0)" class="before"><</a>
<a href="javascript:void(0)" class="after">></a>
</div>
</body>
</html>
H5C3结合JQuery实现的炫酷分裂式轮播图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。