js原生实现移动端手指滑动轮播图效果的示例


Posted in Javascript onJanuary 02, 2018

如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
</head>
<style>
  html{height:100%;}
  body{width: 100%;height:100%;margin:0;overflow: hidden;}
  .wrap{position: relative;overflow: hidden;}
  .box{position: absolute;list-style: none;left:0;top:0;padding:0;margin:0;}
  .box li{float:left;}
  .box{
    position: relative;
    height: 2000px;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: red;
  }
  .box1{
    height: 2000px;
  }
  .box2{
    background: yellow;
  }
  .box3{
    background: yellowgreen;
  }
  .box4{
    background: orange;
  }
  .box5{
    background: cyan;
  }
</style>
<body>
<div class="wrap">
  <ul class="box">
    <li><div class="box1 box2">11111</div></li>
    <li><div class="box1 box3">2222</div></li>
    <li><div class="box1 box4">3333</div></li>
    <li><div class="box1 box5">4444</div></li>
  </ul>
</div>
<script>
  var aLi = document.querySelectorAll(".box li");
  var box = document.querySelector('.box');
  var wrap = document.querySelector('.wrap');
  var aLiWidth = box.offsetWidth;
  console.log('aLiWidth: ' + aLiWidth)
  wrap.style.height = aLi[0].offsetHeight + 'px';
  // 设置盒子的宽度
  box.style.width = aLi.length*100 + '%';
  for(var i=0;i<aLi.length;i++){
    aLi[i].style.width = 1/aLi.length * 100 + '%';
  };
  // 初始化手指坐标点
  var startPoint = 0;
  var startEle = 0;
  //手指按下
  wrap.addEventListener("touchstart",function(e){
    startPoint = e.changedTouches[0].pageX;
    startEle = box.offsetLeft;
  });
  //手指滑动
  wrap.addEventListener("touchmove",function(e){
    var currPoint = e.changedTouches[0].pageX;
    var disX = currPoint - startPoint;
    var left = startEle + disX;
    box.style.left = left + 'px';
  });
  //当手指抬起的时候,判断图片滚动离左右的距离,当
  wrap.addEventListener("touchend",function(e){
    var left = box.offsetLeft;
// 判断正在滚动的图片距离左右图片的远近,以及是否为最后一张或者第一张
    var currNum = Math.round(-left/aLiWidth);
    currNum = currNum>=(aLi.length-1) ? aLi.length-1 : currNum;
    currNum = currNum<=0 ? 0 : currNum;
    box.style.left = -currNum*wrap.offsetWidth + 'px';
  })

</script>

</body>
</html>

以上这篇js原生实现移动端手指滑动轮播图效果的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 #Javascript
基于wordpress的ajax写法详解
Jan 02 #Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 #Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 #Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 #Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 #Javascript
基于jquery.page.js实现分页效果
Jan 01 #jQuery
You might like
php Static关键字实用方法
2010/06/04 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
python调用shell的方法
2013/11/20 Python
详解Python中的循环语句的用法
2015/04/09 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
Python中的With语句的使用及原理
2020/07/29 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
三个Unix的命令面试题
2015/04/12 面试题
职称自我鉴定
2013/10/15 职场文书
工商干部先进事迹
2014/05/14 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
发布会邀请函
2015/01/31 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
小学教师教学反思
2016/02/24 职场文书
分家协议书范本
2016/03/22 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js