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 相关文章推荐
javascript中的new使用
Mar 20 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
基于JS实现快速读取TXT文件
Aug 25 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 危险函数全解析
2009/09/09 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
angular动态表单制作
2018/02/23 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
Swiper实现导航栏滚动效果
2020/10/16 Javascript
在python中安装basemap的教程
2018/09/20 Python
使用Python处理BAM的方法
2018/09/28 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
python全栈开发语法总结
2020/11/22 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
综合办公室个人的自我评价
2013/12/22 职场文书
大学生思想汇报范文
2013/12/31 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
热血教师观后感
2015/06/10 职场文书