<!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://img.mukewang.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;
}
没有把swipe的js文件引入
https://github.com/MrZhangFengfeng/anAnimation
加入了一些自己的小修改。后期会进一步优化以及加上更多效果。
欢迎star 欢迎fork
你看看引用文件的路径对不对