JavaScript实现移动端轮播效果
更新时间：2017年06月06日 09:27:16 作者：叫我小红依吧
这篇文章主要为大家详细介绍了JavaScript实现移动端轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
这个轮播代码不是我自己所写，是偶然游览一个简友的主页看到的，今天刚看了事件，决定来逐行分析一下这个代码。首先，移动端与电脑端不同的是移动端只能通过触摸和手势来发生行为，所以我们要用到js中的与触摸操作有关的新事件。其实我们轮播的原理和以前相同，都是通过改变元素的位置来控制图片的出现，但让我们不是很上手的，是那些用于跟踪触摸的属性。
下面，我简单介绍一下与触摸相关的知识
触摸事件
- touchstart：当手指触摸屏幕时触发，一只手指放在屏幕上也会触发
- touchmove：当手指在屏幕上滑动时连续触发。在这个事件发生期间可以用preventDefault()可以阻止滚动。
- touchend：手指从屏幕移开时触发。
- touchcancel：当系统停止跟踪触发时触发。
上面这几个事件都会冒泡，也都可以取消。
属性
- touches:表示当前跟踪的触摸操作的Touch对象的数组
- targetTouches:特定于事件目标的Touch对象的数组。（简单点可以理解为手指触摸屏幕的位置）
- changeTouches表示自上次触摸以来发生了什么改变的touch对象的数组。（手指离开的位置）
每个touch对象包括下列属性
- clientX:触摸目标在视口中的x坐标
- clientY:触摸目标在视口中的y坐标
- identifier:标识触摸的唯一ID
- pageX:触摸目标在页面中的x坐标
- pageY:触摸目标在页面中的y坐标
- screenX:触摸目标在页面中的x坐标
- screenY:触摸目标在页面中的y坐标
- target:触摸的dom节点目标
代码如下
<!DOCTYPE html>
<html>
<head>
<title>移动端轮播</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
width: 980px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
#box ul {
width: 4900px;
height: 100px;
position: relative;
transform: translateX(-980px);
}
#box ul li{
width: 980px;
height: 100px;
float: left;
list-style-type: none;
text-align: center;
color: #fff;
line-height: 100px;
font-size: 30px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementById('box');
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.children;//这样就可以把所有li标签获取到了
var iNow = 1;
var x = -iNow*aLi[0].offsetWidth;//li标签的位置
var bReady = true;
oUl.addEventListener('touchstart',function(ev){
//当手指触摸屏幕的时候触发事件，让li的位置随手指滑动而改变
if(bReady == false){return;}
bReady = false;
var downX = ev.targetTouches[0].pageX; //记录触摸位置
var disX = downX - x;//下一个li要移动到的位置
function fnMove(ev) {
x = downX-disX;
oUl.style.transform = 'translate3d('+x+'px,0,0)';
}
function fnEnd(ev){
var upX = ev.changedTouches[0].pageX;//离开的位置
if(Math.abs(upX - downX)>50){
//左边移动
if(upX - downX<0){
iNow++;
if(iNow==aLi.length){iNow=aLi.length-1;}
}else{
//右边移动
iNow--;
if(iNow==-1){iNow=0;}
}
}
x = -iNow*aLi[0].offsetWidth;
oUl.style.transform = 'translate3d('+x+'px,0,0)';
oUl.style.transition = '200ms all ease';
function tEnd(){
if(iNow==4){
iNow=1;
}
if(iNow==0){iNow=3;}
oUl.style.transition = 'none'
x = -iNow*aLi[0].offsetWidth;
oUl.style.transform = 'translate3d('+x+'px,0,0)';
bReady = true;
}
oUl.addEventListener('transitionend',tEnd,false);
//释放内存
document.removeEventListener('touchend',fnEnd,false);
document.removeEventListener('touchmove',fnMove,false);
}
document.addEventListener('touchmove',fnMove,false);
document.addEventListener('touchend',fnEnd,false);
//阻止默认事件
ev.preventDefault();
},false);
}
</script>
</head>
<body>
<div id="box">
<ul>
<li style="background:green">3</li>
<li style="background:orange">1</li>
<li style="background:yellow">2</li>
<li style="background:green">3</li>
<li style="background:orange">1</li>
</ul>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
bootstrap日历插件datetimepicker使用方法
这篇文章主要为大家详细介绍了bootstrap日历datetimepicker插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家详细介绍了基于bootstrap的选择框插件icheck，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
本篇文章主要是对js中浮点型运算BUG的解决方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
说到函数式编程，人们的第一印象往往是其学院派，晦涩难懂，大概只有那些蓬头散发，不修边幅，甚至有些神经质的大学教授们才会用的编程方式。2010-06-06
最近在开发中遇到了一个需求,需要获取小程序的全部数据,所以这篇文章主要给大家介绍了关于小程序中实现获取全部数据的相关资料,需要的朋友可以参考下2022-11-11
实现iframe延时加载...2006-10-10
这篇文章主要介绍了JavaScript深入理解作用域链与闭包详情,文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-07-07
表格求和想必大家并不陌生，下面为大家详细介绍下通过相同的name进行表格求和，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
本文主要分享了原生JS下拉加载插件的实现代码。具有一定的参考价值，需要的朋友一起来看下吧2016-12-12
async表示异步,而await可以看作async wait,个人对async与await的简单理解就是,我们可以用同步的方式去书写异步代码,这篇文章主要给大家介绍了关于JS中如何优雅的使用async await的相关资料,需要的朋友可以参考下2021-10-10
最新评论