自己把code粘貼下來(lái)，運(yùn)行效果跟網(wǎng)站的效果不一？
<!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">
???<!--第一幅畫(huà)面-->
???<li>頁(yè)面1</li>
???<!--第二幅畫(huà)面-->
???<li>頁(yè)面2</li>
???<!--第三幅畫(huà)面-->
???<li>頁(yè)面3</li>
??</ul>
??<div class="button">
???<button>點(diǎn)擊切換畫(huà)面</button>
??</div>
?</div>
?<script type="text/javascript">
??var swipe=Swipe($("#content"));
??$('button').click(function(){
???//調(diào)用接口
???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-->
///////////
//頁(yè)面滑動(dòng)///
/////////
/**
* [Swipe description]
* @param {[type]} container [頁(yè)面容器節(jié)點(diǎn)]
* @param {[type]} options?? [參數(shù)]
*/
function Swipe(container){
??? // 獲取第一個(gè)子節(jié)點(diǎn)
??? var element = container.find(":first");
??? //滑動(dòng)對(duì)象
??? var swipe={};
??? // li頁(yè)面數(shù)量
??? var slides = element.find("li");
??? // 獲取容器尺寸
??? var width = container.width();
??? var height = container.height();
??? // 設(shè)置li頁(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'
??????? });
??? });
??? //監(jiān)控完成與移動(dòng)
??? swipe.scrollTo=function(x,speed){
??????? //執(zhí)行動(dòng)畫(huà)移動(dòng)
??????? element.css({
??????????? 'transition-timing-function' : 'linear';
??????????? 'transition-duration'??????? : speed + 'ms';
??????????? 'transform'????????????????? : 'translate3d(-'+x+'px,0px,0px)'
??????? });
??????? return this;
??? };
??? return swipe;
}
2017-05-12
沒(méi)有把swipe的js文件引入
2017-05-03
加入了一些自己的小修改。后期會(huì)進(jìn)一步優(yōu)化以及加上更多效果。?
歡迎star ?歡迎fork
2016-12-30
你看看引用文件的路徑對(duì)不對(duì)