<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title>移动端触摸滑动</title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's js lib" />
<meta name="description" content="移动端触摸滑动" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
<link type="text/css" rel="stylesheet" href="common/css/reset.css" />
<link type="text/css" rel="stylesheet" href="common/css/common.css" />
<style>
*{margin:0;padding:0;}
li{list-style:none;}
.m-slider{
width:100%;
overflow:hidden;}
.m-slider .cnt{
position: relative;
left:0;
width:500%;
overflow: hidden;
}
.m-slider .cnt > div{
width:20%;
float: left;
}
.m-slider .cnt img{
display:block;
width:100%;
}
.m-slider .cnt p{
margin:20px 0;
}
.m-slider .icons{
text-align:center;
color:#000;
}
.m-slider .icons span{
margin:0 5px;
}
.m-slider .icons .curr{
color:red;
}
.f-anim{
-webkit-transition:left .2s linear;
}
#slider{
top: 0px;
}
</style>
</head>
<body>
使用说明在底部
<div class="m-slider">
<div class="cnt" //仅在左右滑动时 没有endFn方法时有效
});
*
*
*
*
*
*
*
* */
</script>
</body>
</html>
相关文章：