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 相关文章推荐
DWZ刷新dialog解决方法
Mar 03 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
JS运算符简单用法示例
Jan 19 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
PHP队列用法实例
2014/11/05 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
使用正则替换变量
2007/05/05 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
python线程的几种创建方式详解
2019/08/29 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
golang语言指针操作
2022/04/14 Golang