自己把code粘貼下來，運行效果跟網站的效果不一？
<!DOCTYPE html>
<html>
<head>
?<meta http-equiv="content-type" content="text/html;charset=utf-8">
?<title>七夕言情</title>
?<link rel="stylesheet" type="text/css" href="style/main.css">
?<link rel="stylesheet" type="text/css" href="style/reset.css">
?<script type="text/javascript" src="js/Swipe.js"></script>
?<script src="http://img1.sycdn.imooc.com//down/55ac9a860001a6c500000000.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(){
???//調用接口
???swipe.scrollTo($("#content").width()*2, 5000);
??});
?</script>
</body>
</html>
<！--main.css-->
/*body*/
#content{
?width: 100%;
?height: 100%;
?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{
?position: absolute;
?bottom: 0;
}
button{
?width: 100px;
?height: 50px;
}
<!--Swipe.js-->
///////////
//頁面滑動///
/////////
/**
* [Swipe description]
* @param {[type]} container [頁面容器節點]
* @param {[type]} options?? [參數]
*/
function Swipe(container){
??? // 獲取第一個子節點
??? 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'
??????? });
??? });
??? //監控完成與移動
??? swipe.scrollTo=function(x,speed){
??????? //執行動畫移動
??????? element.css({
??????????? 'transition-timing-function' : 'linear';
??????????? 'transition-duration'??????? : speed + 'ms';
??????????? 'transform'????????????????? : 'translate3d(-'+x+'px,0px,0px)'
??????? });
??????? return this;
??? };
??? return swipe;
}
2017-05-12
沒有把swipe的js文件引入
2017-05-03
加入了一些自己的小修改。后期會進一步優化以及加上更多效果。?
歡迎star ?歡迎fork
2016-12-30
你看看引用文件的路徑對不對