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 相关文章推荐
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php生成curl命令行的方法
2015/12/14 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
javascript 禁止复制网页
2009/06/11 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
酒店管理求职信范文
2014/04/06 职场文书
小学数学教研活动总结
2014/07/01 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript
MySQL学习之基础操作总结
2022/03/19 MySQL