<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>七夕言情</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<script src="http://img1.sycdn.imooc.com//down/55ac9a860001a6c500000000.js"></script>
<style type="text/css">
*{
padding: 0;
margin:0;
}
ul,li{list-style-type:none;}
#content{
width:60%;
height: 60%;
top:20%;
left: 20%;
overflow: hidden;
position: absolute;
border: 1px solid #ccc;
}
.content-wrap{position: relative;}
.content-wrap > li{
width:100%;
height: 100%;
background: #cae1ff;
color: red;
float: left;
overflow: hidden;
position: relative;
}
li:nth-child(2){
background:#9bcd9b;
}
li:nth-child(3){
background: yellow;
}
button{
width:100px;
height:50px;
}
.button{
position:absolute;
bottom:0;
}
</style>
<script type="text/javascript">
var container=$('#content');//获取第一个子节点
var element=container.find(':first'); //li页面数量
var slides=element.find('li'); //获取容器的尺寸
var width=container.width();
var height=container.height(); //设置页面的总高度
element.css(
{
width:(slides.length * width)+'px',
height:height+'px'
});//设置每一个页面li的宽度
$.each(slides,function(index){
var slide=slides.eq(index);//获取到每一个li元素
slide.css({
width:width+'px',
height:height+'px'
});
});
//设置每一个元素的尺寸
//绑定一个事件，触发通过
$('button').click(function(){
//在5秒的时间内，移动x 的位置，为2个页面单位
element.css({
'transition-timing-function':'linear',
'transition-duration':'5000ms',
'transform':'translate3d(-'+(width*2)+'px,0px,0px)'//设置页面x轴的移动
});
});
</script>
</head>
<body>
<div id='content'>
<ul>
<!--第一幅画面-->
<li>页面1</li>
<!--第二幅画面-->
<li>页面2</li>
<!--第三幅画面-->
<li>页面3</li>
</ul>
<div>
<button>点击切换页面</button>
</div>
</div>
</body>
</html>
