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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
JavaScript 数组的 uniq 方法
Jan 23 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
HTML元素拖拽功能实现的完整实例
Dec 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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
php导出CSV抽象类实例
2014/09/24 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
浅谈 vue 中的 watcher
2017/12/04 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
python简单读取大文件的方法
2016/07/01 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
python中Mako库实例用法
2020/12/31 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
2013届毕业生求职信范文
2013/11/20 职场文书
电子商务专业自我鉴定
2013/12/18 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis