css3+jq实现手写轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.xxx{
position: relative;
margin-top: 100px;
}
.xxx div{
width: 500px;
height: 200px;
border: 1px solid #000000;
line-height: 200px;
text-align: center;
font-size: 130px;
background-color: #FFFFFF;
position: absolute;
left: 0;
top: 0;
transition-property: transform,z-index;
transition-duration: 1s;
}
</style>
</head>
<body>
<input type="button" value="right" onclick="roll(this)" data-type="right" />
<input type="button" value="left" onclick="roll(this)" data-type="left"/>
<div class="xxx">
<div class="d0" data-index="0">0</div>
<div class="d1" data-index="1">1</div>
<div class="d2" data-index="2">2</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let xx = [{x:0,scale:1,zIndex:0},{x:400,scale:1.2,zIndex:10},{x:800,scale:1,zIndex:0}];
function init(){
$(".xxx div").each(function(obj,i){
let index = $(this).attr("data-index");
let xxx = xx[index];
$(this).css({"transform":"translateX("+xxx.x+"px) scale("+xxx.scale+")","z-index":xxx.zIndex});
});
}
init();
function roll(obj){
var type = $(obj).attr("data-type");
$(".xxx div").each(function(obj,i){
let index = $(this).attr("data-index");
if(type=='right'){
index++;
index = index > 2 ? 0 : index;
}else{
index--;
index = index < 0 ? 2 : index;
}
let xxx = xx[index];
$(this).css({"transform":"translateX("+xxx.x+"px) scale("+xxx.scale+")","z-index":xxx.zIndex});
$(this).attr("data-index",index);
})
}
</script>
</body>
</html>
