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 相关文章推荐
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
javascript页面倒计时实例
Jul 25 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
手写实现JS中的new
Nov 07 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
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
跟老齐学Python之做一个小游戏
2014/09/28 Python
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Djang中静态文件配置方法
2015/07/30 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
python中实现控制小数点位数的方法
2019/01/24 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
董事长助理工作职责
2014/06/08 职场文书
检讨书范文2000字
2015/01/28 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技