<!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');//獲取第一個(gè)子節(jié)點(diǎn)
var?element=container.find(':first');?//li頁(yè)面數(shù)量
var?slides=element.find('li');?//獲取容器的尺寸
var?width=container.width();
var?height=container.height();?//設(shè)置頁(yè)面的總高度
element.css(
{
width:(slides.length?*?width)+'px',
height:height+'px'
});//設(shè)置每一個(gè)頁(yè)面li的寬度
$.each(slides,function(index){
var?slide=slides.eq(index);//獲取到每一個(gè)li元素
slide.css({
width:width+'px',
height:height+'px'
????????????});
});
//設(shè)置每一個(gè)元素的尺寸
//綁定一個(gè)事件，觸發(fā)通過(guò)
$('button').click(function(){
//在5秒的時(shí)間內(nèi)，移動(dòng)x?的位置，為2個(gè)頁(yè)面單位
element.css({
'transition-timing-function':'linear',
'transition-duration':'5000ms',
'transform':'translate3d(-'+(width*2)+'px,0px,0px)'//設(shè)置頁(yè)面x軸的移動(dòng)
});
});
</script>
</head>
????<body>
?????<div?id='content'>
?????<ul>
?????<!--第一幅畫(huà)面-->
?????<li>頁(yè)面1</li>
?????<!--第二幅畫(huà)面-->
?????<li>頁(yè)面2</li>
?????<!--第三幅畫(huà)面-->
?????<li>頁(yè)面3</li>
?????</ul>
????????????<div>
????????????????<button>點(diǎn)擊切換頁(yè)面</button>
????????????</div>
?????</div>
?????
????</body>
</html>
