移动端轮播图

1. 页面布局

1.1 页面框架

<body><div class="box"><div class="tupian"><img src="4.webp" alt=""><img src="1.webp" alt=""><img src="2.webp" alt=""><img src="3.webp" alt=""><img src="4.webp" alt=""><img src="1.webp" alt=""></div><ul><li data-aa="0" class="aaa"></li><li data-aa="1"></li><li data-aa="2"></li><li data-aa="3"></li></ul></div>
</body>

1.2css样式

    <style>*{margin: 0;padding: 0;}.box {position: relative;/* 在移动端如果不设置下面样式 可以拖动 */overflow: hidden;}.tupian img {float: left;width: 16.66%;}.tupian {width: 600%;margin-left:-393px;}ul {position: absolute;top: 300px;right: 20px;}ul li {float: left;margin-left: 30px;background-color: #fff;display: block;width: 20px;height: 10px;}.aaa {background-color: coral;}</style>

2. 实现自动轮播

2.1 获取用到元素

    var box = document.querySelector('.box')var tupian = document.querySelector('.tupian')var ul = document.querySelector('ul')

2.2 通过css3的 transition 和 transform 属性实现动画效果

  • 创建全局变量num作为轮播图的计数器
  • 创建全局变量imgWidth 此变量就是整个box的宽度
  • 创建一个定时器 时隔3秒触发一次 num++ 同时执行下面代码：
    var translate = -num * imgWidth 整体tupian向左每次移动一张图片宽度
  • 通过transition实现过渡效果
var timer = setInterval(function () {num++var translate = -num * imgWidth//设置元素的移动在2s内完成 给元素添加过度tupian.style.transition = 'all 1s'tupian.style.transform = 'TranslateX(' + translate + 'px)'}, 3000)

以上代码计时器开启后会不断切换宽度 当num>4后没有图片显示 当num<0后前方也没有图片

2.3 解决上面问题 实现重复轮播图片

  • 通过给 tupian 添加 transitionend 事件 （当transition过渡效果完成后触发此事件）
  • 在此事件中通过判断num==4时 将tupian.style.transform的值设为0 也就是回到第一张位置
  • 同时将取消过度效果
  • 此事件中添加判断
    当num==4时也就是最后一张图片
    当num<0时也就是第一张图片（后补那张和最后一张相同）
//过度执行结束后 会触发 transitionend 事件tupian.addEventListener('transitionend', function () {// console.log(num)if (num == 4) {num = 0//取消过度tupian.style.transition = 'none'tupian.style.transform = 'TranslateX(0px)'}else if(num<0){num=3var translatex=-num*imgWidthtupian.style.transition = 'none'tupian.style.transform = 'TranslateX('+translatex+'px)'}

3. 手指拖动实现轮播

1. 手指触摸到元素上 停止轮播图自动播放
2. 判断手指的移动方向 然后图片向这个方向移动
3. 判断手指的移动距离 如果超出范围就切换轮播图 如果没有超出这个范围 则继续显示原来的轮播图

3.1 设置全局变量

//获取手指的初始坐标
var startx = 0
//获取图片的初始坐标
var tupianx = 0
//手指的移动距离
var movex = 0

3.2 为 tupian 添加手指按下事件

事件中：

  • 停止轮播图
  • 获取手指按下时的坐标 赋值给变量 startx
  • 获取按下手指时的tupian坐标
tupian.addEventListener('touchstart', function (e) {//手指按下时将现在坐标赋值给 startxstartx = e.targetTouches[0].pageXtupianx = tupian.offsetLeft//清除定时器clearInterval(timer)timer = null})

3.3 为 tupian 添加手指在DOM上的移动事件

事件中：

  • 通过e.targetTouchrs[0].pageX不断获取手指的坐标
  • 通过公式movex=e.targetTouchrs[0].pageX - startx 拿到手指的移动距离
  • 将上面的这个距离赋值给 tupian 让其随之移动
  • 判断flag是后面的节流阀代码 当过渡效果未完成不允许拖动
//为tupian添加 touchmove（手指拖动） 事件 拖动 tupiantupian.addEventListener('touchmove', function (e) {//禁止默认行为e.preventDefault()if (flag) {movex = e.targetTouches[0].pageX - startxvar translatex = -num * imgWidth + movex//取消过度tupian.style.transition = 'none'this.style.transform = 'Translatex(' + translatex + 'px)'}})

3.4 为 tupian 添加手指离开DOM事件

事件中：

  • 判断手指的移动有没有超过50
    超过50切换轮播图
    未超50回弹轮播图
  • 同时判断手指滑动方向 决定切换上一张还是下一张轮播图
  • 并且重启轮播图
tupian.addEventListener('touchend', function () {/*根据手指的移动距离 判断是否需要切换轮播图如果移动距离 >=50 切换轮播图如果移动距离  <50 回弹轮播图*///设置节流阀if (flag) {//将节流阀设置为falseflag = falseif (Math.abs(movex) >= 50) {if (movex > 0) {num--} else {num++}var translatex = -num * imgWidth//添加过度效果tupian.style.transition = 'all 1s'this.style.transform = 'Translatex(' + translatex + 'px)'} else {var translatex = -num * imgWidth//添加过度效果tupian.style.transition = 'all 1s'this.style.transform = 'Translatex(' + translatex + 'px)'}//清除定时器clearInterval(timer)//重启轮播timer = setInterval(function () {num++var translate = -num * imgWidth//设置元素的移动在2s内完成 给元素添加过度tupian.style.transition = 'all 1s'tupian.style.transform = 'TranslateX(' + translate + 'px)'}, 3000)}})

4. 设置指示器的样式

效果：当轮播图转换到相应的图片是 下面相应的指示器与其他颜色不同

  • 设置全局变量sort用来为指示器计数
  • 把sort变量放置到transitionend事件中 也就是过度效果完成后sort=图片的下标值
  • 设置指示器效果函数如下两种：

第一种：将每次调用此函数 将所有的li标签的类名清空
同时为显示图片对应的指示器添加类名 函数调用在transitionend事件中

//设置指示器的样式function yuan() {for (var i = 0; i < ul.children.length; i++) {ul.children[i].className = ''}//设置对应指示器的样式ul.children[sort].className = 'aaa'}

第二种：通过classlist属性 找出具有aaa类名的li将其类名清空 同时为显示图片对应的指示器添加类名
函数调用在transitionend事件中

//设置指示器的样式function yuan() {ul.querySelector('.aaa').classList.remove('aaa')//设置对应指示器的样式ul.children[sort].className = 'aaa'}

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.box {position: relative;/* 在移动端如果不设置下面样式 可以拖动 */overflow: hidden;}.tupian img {float: left;width: 16.66%;}.tupian {width: 600%;margin-left:-414px;}ul {position: absolute;top: 300px;right: 20px;}ul li {float: left;margin-left: 30px;background-color: #fff;display: block;width: 20px;height: 10px;}.aaa {background-color: coral;}</style>
</head><body><div class="box"><div class="tupian"><img src="4.webp" alt=""><img src="1.webp" alt=""><img src="2.webp" alt=""><img src="3.webp" alt=""><img src="4.webp" alt=""><img src="1.webp" alt=""></div><ul><li data-aa="0" class="aaa"></li><li data-aa="1"></li><li data-aa="2"></li><li data-aa="3"></li></ul></div>
</body>
<script>var box = document.querySelector('.box')var tupian = document.querySelector('.tupian')var ul = document.querySelector('ul')//获取移动的宽度var imgWidth = box.offsetWidth//创建变量 用于轮播图的计数器var num = 0//创建一个用于指示器的计数器var sort = 0//设置节流阀flag = true//创建指示器的计数器var sort=0//自动轮播效果的实现var timer = setInterval(function () {num++var translate = -num * imgWidth//设置元素的移动在2s内完成 给元素添加过度tupian.style.transition = 'all 1s'tupian.style.transform = 'TranslateX(' + translate + 'px)'}, 3000)//过度执行结束后 会触发 transitionend 事件tupian.addEventListener('transitionend', function () {// console.log(num)if (num == 4) {num = 0//取消过度tupian.style.transition = 'none'tupian.style.transform = 'TranslateX(0px)'}else if(num<0){num=3var translatex=-num*imgWidthtupian.style.transition = 'none'tupian.style.transform = 'TranslateX('+translatex+'px)'}//为节流阀设置为trueflag = true//设置指示器样式sort=numyuan()})/*实现手指拖动轮播图（1手指触摸到元素上 停止轮播图自动播放（2判断手指的移动方向 然后图片向这个方向移动（3判断手指的移动距离 如果超出范围就切换轮播图 如果没有超出这个范围 则继续显示原来的轮播图*///获取手指的初始坐标var startx = 0//获取图片的初始坐标var tupianx = 0//手指的移动距离var movex = 0//为tupian添加 touchstart（手指触摸） 事件 停止轮播tupian.addEventListener('touchstart', function (e) {//手指按下时将现在坐标赋值给 startxstartx = e.targetTouches[0].pageXtupianx = tupian.offsetLeft//清除定时器clearInterval(timer)timer = null})//为tupian添加 touchmove（手指拖动） 事件 拖动 tupiantupian.addEventListener('touchmove', function (e) {//禁止默认行为e.preventDefault()if (flag) {movex = e.targetTouches[0].pageX - startxvar translatex = -num * imgWidth + movex//取消过度tupian.style.transition = 'none'this.style.transform = 'Translatex(' + translatex + 'px)'}})//为tupian添加 touchend（手指离开） 事件 重启轮播tupian.addEventListener('touchend', function () {/*根据手指的移动距离 判断是否需要切换轮播图如果移动距离 >=50 切换轮播图如果移动距离  <50 回弹轮播图*///设置节流阀if (flag) {//将节流阀设置为falseflag = falseif (Math.abs(movex) >= 50) {if (movex > 0) {num--} else {num++}var translatex = -num * imgWidth//添加过度效果tupian.style.transition = 'all 1s'this.style.transform = 'Translatex(' + translatex + 'px)'} else {var translatex = -num * imgWidth//添加过度效果tupian.style.transition = 'all 1s'this.style.transform = 'Translatex(' + translatex + 'px)'}//清除定时器clearInterval(timer)//重启轮播timer = setInterval(function () {num++var translate = -num * imgWidth//设置元素的移动在2s内完成 给元素添加过度tupian.style.transition = 'all 1s'tupian.style.transform = 'TranslateX(' + translate + 'px)'}, 3000)}})//设置指示器的样式function yuan() {for (var i = 0; i < ul.children.length; i++) {ul.children[i].className = ''}//设置对应指示器的样式ul.children[sort].className = 'aaa'}
</script></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/248792.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Boost 序列化

Boost 序列化

原文链接&#xff1a; https://blog.csdn.net/qq2399431200/article/details/45621921 1. 编译器 gcc, boost 1.55 2.1第一个简单的例子 —— Hello World &#xff0c;将字符串内容归档到文本文件中 #include <iostream>#include <fstream>#include <string>…
阅读更多...
docker CE 的安装

docker CE 的安装

一、Docker CE的安装1.先决条件运行环境&#xff1a;Ubuntu 64位或者其他支持Docker的64位系统运行配置&#xff0c;linux内核版本必须大于 3.10&#xff0c;否则会因为缺少容器运行所需的功能而出错。 2.在ubuntu下安装Docker CEUbuntu版本 Cosmic 18.10  Bionic 18.04 (…
阅读更多...
nodeJS中的异步编程

nodeJS中的异步编程

nodejs 不是单线程 在博客项目中关于异步问题&#xff1a; 1.当用户添加一条博客时 需要通过post方式向服务器发送数据 后台获取用户以post方式拿到传送过来的数据 然后存入数据库&#xff1a; 上面的代码&#xff1a;创建一个空字符串 当用户向服务器发送请求时出发data事件将…
阅读更多...
day01笔记

day01笔记

linux基本命令的学习&#xff1a; 1.查看主机名hostname 2.修改主机名hostnamectl set-hostname s16ds 3.linux命令提示符 [roots16ds ~]# # 超级用户的身份提示符 $ 普通用户的身份提示符4.修改命令提示符 PS1变量控制 [roots16ds ~]# echo $PS1 [\u\h \W]\$PS1[\u\h \w \t]…
阅读更多...
angular 路由

angular 路由

1. vscode编辑器快速新建主路由&#xff1a; ng-router注意修改为 根路由为&#xff1a;‘forRoot()’app-route.module.ts;{ path:,redirectTo:/login,pathMatch:full } 当路由为空的时候&#xff0c;会重定向到/login路由&#xff0c;必须加上pathMatch:full 1 import { Rou…
阅读更多...
nodeJs 操作数据库

nodeJs 操作数据库

首先在node中下载mysql包 npm install mysql 连接数据库 var mysql require(mysql); var con mysql.createConnection({host : localhost,user : root,password : root,database : blog });开启链接 con.connect();执行增删改查 不同功能创建不同的sql语句即可…
阅读更多...
shell字体颜色应用

shell字体颜色应用

输出特效格式控制&#xff1a; \033[0m 关闭所有属性 \033[1m 设置高亮度 \03[4m 下划线 \033[5m 闪烁 \033[7m 反显 \033[8m 消隐 \033[30m -- \033[37m 设置前景色 \033[40m -- \033[47m 设置背景色 光标位置等的格式控制&#xff1a; …
阅读更多...
Spring Boot 统一结果封装

Spring Boot 统一结果封装

ResultVo, 返回结果对象 Data public class ResultVo<T> {private Integer code;private String message;private T data; }ResultVoUtil, 封装返回结果 public class ResultVoUtil {public static<T> ResultVo<T> sucess(T data) {ResultVo<T> result…
阅读更多...
总结面试题——Javascript

总结面试题——Javascript

文章目录1.闭包2.作用域链3.JavaScript的原型 原型链 有什么特点4.事件代理5.Javascript如何实现继承6.this对象7.事件模型8.new操作符9.ajax原理10.解决跨域问题11.模块化开发怎么做12.异步加载js的方式有哪些13.会造成内存泄漏的操作14.XML和JSON的区别15.webpack16.AMD和Com…
阅读更多...
js实现替换指定字符后面的内容（包括指定字符）

js实现替换指定字符后面的内容（包括指定字符）

href 223d啥啥啥d dds word sss 1233;var indexOf href.indexOf(word);len href.substring(indexOf,href.length);&#xff08;包括指定字符串&#xff09; var newHref href.replace(len,替换内容);转载于:https://www.cnblogs.com/-lin/p/10172503.html
阅读更多...
OAuth2.0 知多少

OAuth2.0 知多少

OAuth2.0 知多少 原文:OAuth2.0 知多少1. 引言 周末逛简书&#xff0c;看了一篇写的极好的文章&#xff0c;点击大红心点赞&#xff0c;就直接给我跳转到登录界面了&#xff0c;原来点赞是需要登录的。 可是没有我并没有简书账号&#xff0c;一直使用的QQ的集成登录。下面有一排…
阅读更多...
五分钟带你摸透 Vue组件及组件通讯

五分钟带你摸透 Vue组件及组件通讯

一.组件化开发 组件 (Component) 是 Vue.js 强大的功能之一。组件可以扩展 HTML 元素&#xff0c;封装可重用的代 码。在较高层面上&#xff0c;组件是自定义元素&#xff0c;Vue.js 的编译器为它添加特殊功能。在vue中都是组件化开发的&#xff0c;组件化开发就是把一个完整的…
阅读更多...
Parameter 'userName' not found. Available parameters are [1, 0, param1, param2]

Parameter 'userName' not found. Available parameters are [1, 0, param1, param2]

Mapper接口的方法的参数没有加&#xff1a;Param("xxx")注解&#xff0c;或者是xxx写不对转载于:https://www.cnblogs.com/linliquan/p/10987136.html
阅读更多...
微信公众号开发-接入

微信公众号开发-接入

一 首先实现内网穿透&#xff0c;公众号需要连接我们的服务器&#xff0c;内外无法访问&#xff0c;所以先实现自己的内网可以测试时连接外网&#xff0c;下载natapp&#xff0c;选择windows&#xff0c;顺便下载config,ini 配置文件。注册好购买免费的隧道 然后将token写入配置…
阅读更多...
Vue 项目上线优化

Vue 项目上线优化

上线项目的优化 优化上线项目&#xff0c;首先在上线打包时我们通过babel插件将console清除&#xff0c;当然对项目打包后的体积的影响是微乎其微&#xff0c;对项目的入口文件的改善也是很有必要的&#xff0c;因为在开发阶段和上线如果我们使用的是同一入口文件&#xff0c;…
阅读更多...
Python并发编程—进程

Python并发编程—进程

多任务编程 1.意义&#xff1a; 充分利用计算机多核资源&#xff0c;提高程序的运行效率。 2.实现方案 &#xff1a;多进程 &#xff0c; 多线程 3.并行与并发 并发 &#xff1a; 同时处理多个任务&#xff0c;内核在任务间不断的切换达到好像多个任务被同时执行的效果&#xf…
阅读更多...
Vue 脚手架中的.eslintrc.js代码规范 的解决

Vue 脚手架中的.eslintrc.js代码规范 的解决

在我们使用Vue脚手架 创建项目时 尤其是团队共同开发项目时 会按照一个共同的代码规范来编程 创建Vue脚手架中有一个.eslintrc.js格式 但是在编程中我们通常会使用 shiftaltf 进行代码格式化 但是由于格式化后的代码 与Vue中的.eslintrc规范不协调 尤其是 “” &#xff1b; 以…
阅读更多...
innodb_locks_unsafe_for_binlog分析

innodb_locks_unsafe_for_binlog分析

mysql数据库中默认的隔离级别为repeat-read. innodb默认使用了next-gap算法&#xff0c;这种算法结合了index-row锁和gap锁。正因为这样的锁算法&#xff0c;innodb在可重复读这样的默认隔离级别上&#xff0c;可以避免幻象的产生。 innodb_locks_unsafe_for_binlog最主要的作用…
阅读更多...
emacs的使用方法

emacs的使用方法

emacs的使用方法 emacs配置&#xff1a; 将文件命名为.emacs&#xff0c;把配置敲进去&#xff0c;放在home文件夹 emacs命令行&#xff1a; altx打开命令行 编译&#xff1a; 在命令行输入compile&#xff0c;回车&#xff0c;会出现make -k&#xff0c;删掉它&#xff0c;输入…
阅读更多...
前端面试---Vue部分考点梳理

前端面试---Vue部分考点梳理

一. Vue的使用 1. Vue的基本使用 指令 插值 插值 表达式 指令 动态属性 v-html 会有XSS风险 会覆盖子组件 computed 和 watch computed 有缓存 data不变则不会重新计算watch 如何深度监听watch 监听引用类型时 拿不到oldVal v-for v-for 和 v-if 不能同时使用:key的值尽量…
阅读更多...
最新文章

Copyright @ 2022~2023