JS仿京东移动端手指拨动切换轮播图效果


Posted in Javascript onApril 10, 2020

如今,移动端web页面在市场上也是占有相当大的比例,而移动端的轮播图效果也是很常见的,今天我就来记录下关于实现一组适用于移动端的可用手指进行拨动切换轮播图的效果。
这个效果的主要技术点依托于触屏设备特有的touch事件;好了,接下来就进入主题吧。

首先是html布局

1. 这里强调的是记得给html加上viewport这个适口属性。
2. 由于在拨动第一张图片以及最后一张图片的时候需要切换到最后一张以及第一张,要想达到理想效果,需要给第一张图片前面加上最后一张图片,而在最后一张图片后加上第一张图片。
3. f_l代表的是左浮动

**html代码如下:**

<ul class='banner_imgs clearfix'>
   <li class='f_l'>
   <a href="#"><img src="image/l8.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l1.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l2.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l3.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l4.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l5.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l6.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l7.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l8.jpg" alt="" /></a>
   </li>
   <li class='f_l'>
   <a href="#"><img src="image/l1.jpg" alt="" /></a>
   </li>
  </ul>
  <!-- 轮播图的 索引 -->
  <ul class="banner_index clearfix">
   <li class="current"></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>

接下来是css样式

注意,此处并没有加上常规的reset样式代码

.jd_banner .banner_imgs {
 /* 10倍屏幕宽度 */
 width: 1000%;
}
.jd_banner .banner_imgs li {
 /* 一倍的屏幕宽度 */
 width: 10%;
}
.jd_banner .banner_imgs li a {
 display: block;
 width: 100%;
}
.jd_banner .banner_imgs li a img {
 display: block;
 width: 100%;
}
.jd_banner .banner_index {
 position: absolute;
 bottom: 15px;
 left: 50%;
 margin-left: -64px;
}
.jd_banner .banner_index li {
 float: left;
 width: 6px;
 height: 6px;
 border: 1px solid white;
 border-radius: 50%;
 margin: 0 5px;
}
.jd_banner .banner_index li.current {
 background-color: #fff;
}

最后是最最重要的js代码

1. transitionend 过渡结束后触发的效果,在这儿主要是保证图片切换到最后一张我们手动增加的图片完成的瞬间,切换回到真正的第一张图片处;
2. touch事件的三要素: touchstart--手指按上时,touchmove--手指移动时,touchend--手指松开屏幕时;
3. event.touches[0].clientX获取按下一个手指时的位置,可以打印出event查看其包含有哪些属性方法;

window.onload = function() {
 slide();
}

function slide() {
 var bannerImgs = document.querySelector(".banner_imgs");
 var Indexs = document.querySelectorAll(".banner_index li");
 var imgLis = document.querySelectorAll(".banner_imgs li");

 //屏幕宽度
 var screenWidth = document.body.offsetWidth;
 var index = 1;

 //默认显示的应该是第二张图片
 bannerImgs.style.transform = "translateX(" + screenWidth * index * -1 + "px)";

 //添加过渡效果
 function setTransition() {
 bannerImgs.style.webkitTransition = "all .2s";
 bannerImgs.style.transition = "all .2s";
 }

 //清除过渡效果
 function clearTransition() {
 bannerImgs.style.webkitTransition = "none";
 bannerImgs.style.transition = "none";
 }

 //设置移动距离
 function setTranslateX(distance) {
 bannerImgs.style.webkitTransform = "translateX(" + distance + "px)";
 bannerImgs.style.transform = "translateX(" + distance + "px)";
 }

 //控制小圆点
 function setPoint() {
 for (var i = 0; i < Indexs.length; i++) {
  Indexs[i].className = "";
 }
 Indexs[index - 1].className = "current";
 }

 //设置定时器
 var timer = setInterval(function() {
 index++;
 setTransition();
 setTranslateX(screenWidth * index * -1);
 }, 1000);

 //添加过渡动画结束事件
 bannerImgs.addEventListener("transitionend", function() {
 if (index > 8) {
  index = 1;
 } else if (index < 1) {
  index = 8;
 }
 clearTransition();
 setTranslateX(screenWidth * index * -1);
 setPoint();
 })


 //添加touch事件
 var startX = 0;
 var moveX = 0;
 var isMove = false;

 bannerImgs.addEventListener("touchstart", function(event) {
 isMove = false;
 clearInterval(timer);
 startX = event.touches[0].clientX;
 })

 bannerImgs.addEventListener("touchmove", function(event) {
 isMove = true;
 moveX = event.touches[0].clientX - startX;
 setTranslateX(moveX + index * screenWidth * -1);
 })

 bannerImgs.addEventListener("touchend", function(event) {
 if(isMove && Math.abs(moveX) > screenWidth/3){
  if (moveX < 0) {
  index++;
  } else if (moveX > 0) {
  index--;
  }
 }
 setTransition();
 setTranslateX(index * screenWidth * -1);
 timer = setInterval(function() {
  index++;
  setTransition();
  setTranslateX(screenWidth * index * -1);
 }, 1000);
 })
}

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

Javascript 相关文章推荐
js 处理URL实用技巧
Nov 23 Javascript
浅谈javascript回调函数
Dec 07 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
如何基于js判断浏览器版本
Feb 20 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 #Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 #Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 #Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 #Javascript
js原生之焦点图转换加定时器实例
Dec 12 #Javascript
IntersectionObserver API 详解篇
Dec 11 #Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 #Javascript
You might like
mysql+php分页类(已测)
2008/03/31 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
ThinkPHP之getField详解
2014/06/20 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
关于Python数据结构中字典的心得
2017/12/04 Python
python如何制作缩略图
2019/04/30 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python实现猜拳小游戏
2020/04/05 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
MySQL如何解决幻读问题
2021/08/07 MySQL