移动端使用touchstart，touchmove，touchend实现图片轮播
移动端基础事件介绍
touchstart //手指触碰屏幕
touchmove //手指在屏幕上滑动
touchend //手指离开屏幕
移动端页面滑动图片滚动是再正常不过的事情了，这次碰巧写到这样一个滚动，就把代码放出来分享一下。首先做的是一个没有经过函数封装的单纯的滑屏轮播
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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>1111111div>
<div>2222222div>
<div>3333333div>
<div>4444444div>
div>
div>
<div id="circle">
<ul>
<li class="active">li>
<li>li>
<li>li>
<li>li>
ul>
div>
<script type="text/javascript">
window.onload = function(){
var startPos = {};//开始位置
var endPos = {};//结束位置
var scrollDirection;//滚动方向
var timr;//定时器，后面控制速度会使用
var touch;//记录触碰节点
var index = 0;//记录滑动到第几张图片
var oImg = document.getElementById("img");
var oCircle = document.getElementById("circle");
var aCircle = oCircle.getElementsByTagName("li");
var ImgWidth;//图片宽度
var speed; //滑动速度
var target;//目标
oImg.ontouchstart = function(event){
touch = event.targetTouches[0];//取得第一个touch的坐标值
startPos = {x:touch.pageX,y:touch.pageY}
scrollDirection = 0;
}
oImg.ontouchmove = function(event){
// 如果有多个地方滑动，我们就不发生这个事件
if(event.targetTouches.length > 1){
return
}
touch = event.targetTouches[0];
endPos = {x:touch.pageX,y:touch.pageY}
// 判断出滑动方向，向右为1，向左为-1
scrollDirection = touch.pageX-startPos.x > 0 ? 1 : -1;
}
oImg.ontouchend = function(){
if(scrollDirection == 1){
if(index >= 1 && index<=3){
index--;
for(var i=0;i'' ;
}
aCircle[index].className = 'active';
ImgWidth = parseInt(oImg.offsetWidth / aCircle.length);
target = -ImgWidth * index;
// oImg.style.left = oImg.offsetLeft + ImgWidth +'px';
timer = setInterval(function(){
speed = parseInt((target-oImg.offsetLeft) / 5);
if(speed == 0){
speed = 4;
}
if(target == oImg.offsetLeft){
clearInterval(timer);
}else{
oImg.style.left = oImg.offsetLeft + speed +'px';
}
},30);
}else{
return
}
}else if(scrollDirection == -1){
if(index >=0 && index <=2){
index++;
for(var i=0;i'';
}
aCircle[index].className = 'active';
ImgWidth = parseInt(oImg.offsetWidth/4);
target = -ImgWidth * index;
timer = setInterval(function(){
speed = parseInt((oImg.offsetLeft-target) / 5);
if(speed == 0){
speed = 4;
}
if(target == oImg.offsetLeft){
clearInterval(timer);
}else{
oImg.style.left = oImg.offsetLeft - speed +'px';
}
},30);
}else{
return
}
}
}
}
script>
body>
html> 作为一名程序员，函数封装那是肯定的，比较这里用了两次呢，那我们就简单封装一下。另外我们发现最后那里有点卡，因为当速度为0 的时候，我们一下提高到了4，另外有时候还有出现闪的情况。这里我们也适当修改一下。最后结果如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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>1111111div>
<div>2222222div>
<div>3333333div>
<div>4444444div>
div>
div>
<div id="circle">
<ul>
<li class="active">li>
<li>li>
<li>li>
<li>li>
ul>
div>
<script type="text/javascript">
window.onload = function(){
var startPos = {};//开始位置
var endPos = {};//结束位置
var scrollDirection;//滚动方向
var timr;//定时器，后面控制速度会使用
var touch;//记录触碰节点
var index = 0;//记录滑动到第几张图片
var oImg = document.getElementById("img");
var oCircle = document.getElementById("circle");
var aCircle = oCircle.getElementsByTagName("li");
var ImgWidth;//图片宽度
var speed; //滑动速度
var target;//目标
function slide(index){
for(var i=0;i'' ;
}
aCircle[index].className = 'active';
ImgWidth = parseInt(oImg.offsetWidth / aCircle.length);
target = -ImgWidth * index;
// oImg.style.left = oImg.offsetLeft + ImgWidth +'px';
timer = setInterval(function(){
speed = speed > 0 ? Math.floor((target-oImg.offsetLeft) / 5) : Math.ceil((target-oImg.offsetLeft) / 5);
if(target == oImg.offsetLeft){
clearInterval(timer);
}else{
oImg.style.left = oImg.offsetLeft + speed +'px';
}
},30);
}
oImg.ontouchstart = function(event){
touch = event.targetTouches[0];//取得第一个touch的坐标值
startPos = {x:touch.pageX,y:touch.pageY}
scrollDirection = 0;
}
oImg.ontouchmove = function(event){
// 如果有多个地方滑动，我们就不发生这个事件
if(event.targetTouches.length > 1){
return
}
touch = event.targetTouches[0];
endPos = {x:touch.pageX,y:touch.pageY}
// 判断出滑动方向，向右为1，向左为-1
scrollDirection = touch.pageX-startPos.x > 0 ? 1 : -1;
}
oImg.ontouchend = function(){
if(scrollDirection == 1){
if(index >= 1 && index <= aCircle.length-1){
index--;
slide(index);
}else{
return
}
}else if(scrollDirection == -1){
if(index >=0 && index <= aCircle.length-2){
index++;
slide(index);
}else{
return
}
}
}
}
script>
body>
html>那么问题又来了，如果别人在电脑打开页面怎么办？电脑不支持滑动轮播啊，所以又增加一个，点击按钮的事件，这样我们就可以很好的支持电脑端和移动端了。因为封装了函数，这次写起来就很快啦
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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>1111111div>
<div>2222222div>
<div>3333333div>
<div>4444444div>
div>
div>
<div id="circle">
<ul>
<li class="active">li>
<li>li>
<li>li>
<li>li>
ul>
div>
<script type="text/javascript">
window.onload = function(){
var startPos = {};//开始位置
var endPos = {};//结束位置
var scrollDirection;//滚动方向
var timr;//定时器，后面控制速度会使用
var touch;//记录触碰节点
var index = 0;//记录滑动到第几张图片
var oImg = document.getElementById("img");
var oCircle = document.getElementById("circle");
var aCircle = oCircle.getElementsByTagName("li");
var ImgWidth;//图片宽度
var speed; //滑动速度
var target;//目标
function slide(index){
for(var i=0;i'' ;
}
aCircle[index].className = 'active';
ImgWidth = parseInt(oImg.offsetWidth / aCircle.length);
target = -ImgWidth * index;
timer = setInterval(function(){
speed = speed > 0 ? Math.floor((target-oImg.offsetLeft) / 5) : Math.ceil((target-oImg.offsetLeft) / 5);
if(target == oImg.offsetLeft){
clearInterval(timer);
}else{
oImg.style.left = oImg.offsetLeft + speed +'px';
}
},30);
}
oImg.ontouchstart = function(event){
touch = event.targetTouches[0];//取得第一个touch的坐标值
startPos = {x:touch.pageX,y:touch.pageY}
scrollDirection = 0;
}
oImg.ontouchmove = function(event){
// 如果有多个地方滑动，我们就不发生这个事件
if(event.targetTouches.length > 1){
return
}
touch = event.targetTouches[0];
endPos = {x:touch.pageX,y:touch.pageY}
// 判断出滑动方向，向右为1，向左为-1
scrollDirection = touch.pageX-startPos.x > 0 ? 1 : -1;
}
oImg.ontouchend = function(){
if(scrollDirection == 1){
if(index >= 1 && index <= aCircle.length-1){
index--;
slide(index);
}else{
return
}
}else if(scrollDirection == -1){
if(index >=0 && index <= aCircle.length-2){
index++;
slide(index);
}else{
return
}
}
}
for(var i = 0;i < aCircle.length; i++){
aCircle[i].index = i;
aCircle[i].onclick = function(){
slide(this.index);
}
}
}
script>
body>
html>