移动端基础事件介绍
touchstart //手指触碰屏幕
touchmove //手指在屏幕上滑动
touchend //手指离开屏幕
移动端页面滑动图片滚动是再正常不过的事情了,这次碰巧写到这样一个滚动,就把代码放出来分享一下。首先做的是一个没有经过函数封装的单纯的滑屏轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 防止屏幕进行伸缩 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
body,html,div,ul,li{
padding:0;
margin:0;
}
#pic{
width:100%;
height: 300px;
overflow: hidden;
}
#pic #img{
width:400%;
height: 300px;
position: relative;
}
#img div{
width:25%;
height: 300px;
float: left;
background-color: orange;
text-align: center;
line-height: 300px;
color: white;
}
#circle{
width:72px;
height: 40px;
margin:0 auto;
position: relative;
z-index: 2;
top:-40px;
}
#circle ul li{
width:8px;
height: 8px;
background-color: white;
list-style: none;
float: left;
margin:15px 5px 0 5px;
}
#circle ul .active{
background-color: gray;
}
</style>
</head>
<body>
<div id="pic">
<div id="img">
<div>1111111</div>
<div>2222222</div>
<div>3333333</div>
<div>4444444</div>
</div>
</div>
<div id="circle">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
window.o