<!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>
<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>
</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>
<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>
<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>
</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>