一、’在线demo演示
点我观看在线demo演示
二、代码部分
CSS代码
body{
margin: 0;
background-color: #333;
}
.wrap{
overflow: hidden;
width: 1200px;
height: 358px;
margin: 100px auto 0;
}
.wrap .contain{
position: relative;
transform-style: preserve-3d;
-webkit-perspective: 600px;
-webkit-perspective-origin: 50% 50%;
width: 600px;
height: 300px;
margin: auto;
}
.wrap .contain .pic{
transition: visibility .9s,transform 1s;
transition-timing-function: linear;
position: absolute;
transform-origin: bottom;
transform: rotateX(90deg);
width: 100%;
height: 100%;
}
.wrap .contain .cur{
transform: rotateX(0deg);
visibility:visible;
}
.wrap .contain .previous{
transform: rotateX(-90deg);
visibility: hidden;
}
.wrap .contain .next{
transform: rotateX(90deg);
visibility: hidden;
}
.wrap .contain .pic:nth-child(1){
background: url("images/01.jpg") no-repeat center/cover;
}
.wrap .contain .pic:nth-child(2){
background: url("images/02.png") no-repeat center/cover;
}
.wrap .contain .pic:nth-child(3){
background: url("images/03.png") no-repeat center/cover;
}
.wrap .contain .pic:nth-child(4){
background: url("images/04.png") no-repeat center/cover;
}
.wrap .contain .pic:nth-child(5){
background: url("images/05.jpg") no-repeat center/cover;
}
.wrap .btn{
margin-top: 35px;
text-align: center;
}
.wrap .btn button{
width: 70px;
}
HTML代码
<div class="wrap">
<div class="contain">
<div class="pic cur"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
</div>
<div class="btn">
<button>UP</button>
<button>DOWN</button>
</div>
</div>
JS代码
<script>
var aButton= document.getElementsByTagName("button"),
aPic= document.getElementsByClassName("pic"),
num1= 0,
num2= 1,
len= aPic.length;
aButton[0].onclick= function(){
if(num1 <= 1){
num1= 1;
num2= 2;
}
aPic[num1-1].className= "pic cur";
aPic[num2-1].className= "pic next";
num1--;
num2--;
}
aButton[1].onclick= function(){
if(num2 >= len){
num2= len-1;
num1= num2-1;
}
else{
aPic[num1].className= "pic previous";
}
aPic[num2].className= "pic cur";
num1++;
num2++;
}
</script>