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 相关文章推荐
javascript中的作用域scope介绍
Dec 28 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
Vue微信公众号网页分享的示例代码
May 28 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
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
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
ext jquery 简单比较
2010/04/07 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
Python进程通信之匿名管道实例讲解
2015/04/11 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python实现下载文件的三种方法
2017/02/09 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
2014法制宣传日活动总结范文
2014/11/01 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS