JavaScript实现移动端轮播效果


Posted in Javascript onJune 06, 2017

这个轮播代码不是我自己所写,是偶然游览一个简友的主页看到的,今天刚看了事件,决定来逐行分析一下这个代码。首先,移动端与电脑端不同的是移动端只能通过触摸和手势来发生行为,所以我们要用到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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
jquery图片切换插件
Mar 16 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
微信jssdk用法汇总
Jul 16 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
vue+php实现的微博留言功能示例
Mar 16 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
js评分组件使用详解
Jun 06 #Javascript
javascript中mouseenter与mouseover的异同
Jun 06 #Javascript
jquery仿京东商品放大浏览页面
Jun 06 #jQuery
Node.js连接mongodb实例代码
Jun 06 #Javascript
jquery实现图片放大点击切换
Jun 06 #jQuery
AngularJS 验证码60秒倒计时功能的实现
Jun 05 #Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 #Javascript
You might like
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
ThinkPHP分页实例
2014/10/15 PHP
php日期操作技巧小结
2016/06/25 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python查看多台服务器进程的脚本分享
2014/06/11 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
python批量下载抖音视频
2019/06/17 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
幼儿园校车司机的岗位职责
2014/01/30 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
表彰大会主持词
2014/03/26 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
无私奉献演讲稿
2014/09/04 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python