javascript实现切割轮播效果实现切割轮播效果
本文实例为大家分享了javascript实现切割轮播的具体代码,供大家参考,具体内容如下
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<style>
.container{
position: relative;
width: 560px;
height: 300px;
}
.container ul{
/*transform-style:preserve-3d;*/
/*transform: rotateX(-30deg) rotateY(21deg);*/
width: 560px;
height: 300px;
border:2px solid red;
list-style-type: none;
margin:0;
padding:0;
}
.container ul li{
position: relative;
float: left;
/*一张图分作5片,图的总宽度是560*/
width: 112px;
height: 300px;
transform-style:preserve-3d;
transition:all 0.5s;
}
.container ul li span{
position: absolute;
left:0;
top:0;