<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕課七夕主題</title>
<link rel='stylesheet' href='style.css' />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="Swipe.js"></script>
</head>
<body>
<div id='content'>
<ul class='content-wrap'>
<!-- 第一副畫面 -->
<li> 頁面1 </li>
<!-- 第二副畫面 -->
<li> 頁面2 </li>
<!-- 第三副畫面 -->
<li> 頁面3 </li>
</ul>
<div class="button">
<button>點擊切換頁面</button>
</div>
</div>
<script type="text/javascript">
var swipe = Swipe($("#content"));
$('button').click(function() {
// 調用接口
//?
});
</script>
</body>
</html>
* {
padding: 0;
margin: 0;
}
ul,
li {
list-style-type: none;
}
/*主體部分*/
#content {
width: 100%;
height: 100%;
/* top: 20%;
left: 20%; */
overflow: hidden;
position: absolute;
}
.content-wrap {
position: relative;
}
.content-wrap > li {
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;
}
/////////
//頁面滑動 //
/////////
/**
* [Swipe description]
* @param {[type]} container [頁面容器節(jié)點]
* @param {[type]} options [參數]
*/
function Swipe(container) {
//獲取第一個子節(jié)點
var element = container.find(":first");
//滑動對象
var swipe = {};
//li頁面數量
var slides = element.find("li");
//獲取容器尺寸
var width = container.width();
var height = container.height();
//設置li頁面總寬度
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'
});
});
//監(jiān)控完成與移動
swipe.scrollTo = function(x, speed) {
//執(zhí)行動畫移動
element.css({
'transition-timing-function' : 'linear',
'transition-duration' : speed + 'ms',
'transform' : 'translate3d(-' + x + 'px,0px,0px)'
});
return this;
};
return swipe;
}
