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 相关文章推荐
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
理解jQuery stop()方法
Nov 21 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
js重写方法的简单实现
Jul 10 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
JavaScript实现滑动门效果
Jan 18 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
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
vue-router命名视图的使用讲解
2019/01/19 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
js实现轮播图特效
2020/05/28 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
python实现异步回调机制代码分享
2014/01/10 Python
Python中处理时间的几种方法小结
2015/04/09 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
Django学习之文件上传与下载
2019/10/06 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
python实现与redis交互操作详解
2020/04/21 Python
Exception类的常用方法
2012/06/16 面试题
《夏夜多美》教学反思
2014/02/17 职场文书
春节联欢会主持词
2014/03/24 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android