js实现移动端轮播图滑动切换


Posted in Javascript onDecember 21, 2020

本文实例为大家分享了js实现移动端轮播图滑动切换的具体代码,供大家参考,具体内容如下

移动端手势

轮播图分析

1、自动轮播且无缝 [定时器、过渡动画]
2、分页器要随着图片的轮播而改变 [根据索引切换]
3、滑动效果 [touch事件]
4、图片随着分页器变化
5、滑动结束的时候,如果滑动的距离不超过屏幕的1/3,就恢复回去 [过渡]
6、滑动结束的时候,如果滑动的距离超过屏幕的1/3,就切换 [滑动方向 + 过渡]]

html页面结构

<!--轮播图-->
 <div class="jd_banner">
  <ul class="clearfix">
  <li><a href="#" ><img src="images/l8.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l1.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l2.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l3.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l4.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l5.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l6.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l7.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l8.jpg" alt=""></a></li>
  <li><a href="#" ><img src="images/l1.jpg" alt=""></a></li>
  </ul>
  <ul class="clearfix">
  <li class="now"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  </ul>
</div>

js部分

/* 动态设置过渡 */
var addTransition = function (ele) {
 ele.style.transition = "all .6s";
 ele.style.webkitTransition = "all .6s";
};
/* 移除过渡效果 */
var removeTransition = function (ele) {
 ele.style.transition = "none";
 ele.style.webkitTransition = "none";
};
/* 设置容器平移 -- 也就是滑动动画 
 ele:当前元素
 xwidth:平移的距离
*/
var setTranslateX = function (ele, xwidth) {
 ele.style.transform = "translateX(" + xwidth + "px)";
 ele.style.webkitTransform = "translateX(" + xwidth + "px)";
}
var banner = function () {
 /** 轮播图分析 */
 /** 1 自动轮播且无缝 [定时器、过渡动画]
 * 2 点要随着图片的轮播而改变 [根据索引切换]
 * 3 滑动效果 [touch事件]
 * 4 图片随着点而变化
 * 5 滑动结束的时候,如果滑动的距离不超过屏幕的1/3,就恢复回去 [过渡]
 * 6 滑动结束的时候,如果滑动的距离超过屏幕的1/3,就切换 [滑动方向 + 过渡]]
 */
 var timer = ''
 /* 封装定时器函数 */
 var startInterval = function () {
 timer = setInterval(function () {
  index++;// 基于索引 做位移
  addTransition(imgBox); // 为轮播图片组的ul设置过渡函数
  setTranslateX(imgBox, -index * width);// 根据当前索引值计算平移的距离
 }, 2000);
 }
 var banner = document.querySelector(".jd_banner");
 var width = banner.offsetWidth; // 屏幕的宽度
 var imgBox = banner.querySelector("ul:first-child"); // 轮播图片ul
 var length = imgBox.querySelectorAll("li").length; // 图片的个数
 var pointBox = banner.querySelector("ul:last-child");// 分页器ul
 var points = pointBox.querySelectorAll("li");// 分页器集合

 var index = 1; // 初始化索引,由于要无缝衔接,索引从1开始
 startInterval();
 
 /* transitionend事件:当元素过渡动画结束后执行
 每次轮播动画结束后,判断当前索引值
 */
 imgBox.addEventListener("transitionend", function () {
 if (index >= length - 1) {
  index = 1;
  // 清过渡,瞬间定位imgBox 
  removeTransition(imgBox);
  setTranslateX(imgBox, -index * width);
 }
 // 滑动的时候也需要无缝
 else if (index <= 0) {
  index = 8;
  removeTransition(imgBox);
  setTranslateX(imgBox, -index * width);
 }
 showPoint(index - 1); // 改变分页器状态
 });

 var showPoint = function (index) {
 for (var i = 0; i < points.length; i++) {
  points[i].className = '';
 }
 points[index].className = "now";
 };
 /* 滑动切换 (touch事件) */
 var startX = 0; // 触摸起始点
 imgBox.addEventListener("touchstart", function (e) {
 // 记录起始位置的X坐标
 clearInterval(timer);
 startX = e.touches[0].clientX;
 });
 var distanceX = 0;
 var translateX = 0;
 // **** 加一个标识,判断用户有没有滑动
 var isMove = false
 imgBox.addEventListener("touchmove", function (e) {
 var moveX = e.touches[0].clientX;
 // 计算位移,有正负方向
 distanceX = moveX - startX;
 // 计算目标元素的位移
 // 元素将要的定位 = 当前定位 + 手指移动的距离
 translateX = -index * width + distanceX;
 // ********** 要想图片实时地跟着手指走,一定要把过渡清楚掉
 removeTransition(imgBox)
 setTranslateX(imgBox, translateX);
 isMove = true;// 确定用户有滑动
 e.preventDefault(); // 去除移动端浏览器默认的滑动事件
 });

 imgBox.addEventListener("touchend", function (e) {
 if (isMove) {
  if (Math.abs(distanceX) > width / 3) {
  // 切换
  if (distanceX > 0) {
   // 上一张
   index = index - 1;
  } else {
   // 下一张
   index = index + 1;
  }
  addTransition(imgBox); // 设置过渡动画
  setTranslateX(imgBox, -index * width);
  if (index >= 9) {
   index = 1;
  }
  if (index <= 0) {
   index = 8;
  }
  showPoint(index - 1);

  } else {
  // 不满足滑动条件,回退到之前的状态
  addTransition(imgBox);
  setTranslateX(imgBox, -index * width);
  showPoint(index - 1);
  }
 }
 // **** 最好做一次参数的重置
 startX = 0;
 distanceX = 0;
 isMove = false;
 // ****** 为了严谨,再清一次定时器
 clearInterval(timer)
 // 加上定时器
 startInterval();
 });
};

总结

原生js实现滑动切换的原理主要还是利用移动端的手势事件

  • touchstart 当手指触摸屏幕时触发
  • touchmove 当手指在屏幕中滑动的时候触发
  • touchend 当手指离开屏幕时触发

利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件。

而swiper插件的底层实现原理也是这个,因此,为了快速开发,还是使用swiper插件最好

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js的写法基础分析
Jan 17 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
vue-router源码之history类的浅析
May 21 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
node.js文件操作系统实例详解
Nov 05 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
vue监听滚动事件的方法
Dec 21 #Vue.js
vue el-upload上传文件的示例代码
Dec 21 #Vue.js
微信小程序自定义支持图片的弹窗
Dec 21 #Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 #jQuery
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 #Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 #Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 #Javascript
You might like
用PHP连接Oracle数据库
2006/10/09 PHP
PHP生成随机密码类分享
2014/06/25 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
JS回调函数深入理解
2019/10/16 Javascript
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
2014厂务公开实施方案
2014/02/17 职场文书
创新社会管理心得体会
2014/09/12 职场文书
保密工作整改报告
2014/11/06 职场文书
财务人员岗位职责
2015/02/03 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
百年校庆感言
2015/08/01 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技