手撸移动端轮播图（内含源码）
2024-04-09 08:07:33
移动轮播图
移动端轮播图与PC段轮播图，在技术选择上是有区别的，因为移动端的浏览器版本非常好，对于H5和CSS3的支持非常完美，所以很多效果可以CSS3的方式实现，比如可以使用 Transorm 属性替代原来的动画函数
- 可以自动播放图片
- 手指可以拖动播放轮播图
- 添加指示器，但只起到指示作用，点击不能切换图片
- 不需要左右导航
- 因为移动端轮播图的宽度一般与屏幕一样宽，所以focus不设置宽度
- 移动端使用CSS3的方式进行图片切换，所以可以给 focus_img 去掉 定位和 left属性
- 因为li标签设置为float:left 后，就变成了行内块元素，其宽度由内容决定，而其内容图片的宽度为520,，所以导致第四章图片被记下来，解决方案：设置每个li标签的宽度为ul的20%，再设置图片的宽度与li标签一样狂
案例分析:
- 自动播放功能
- 开启定时器
- 移动端移动，可以使用translate 移动
- 想要图片优雅的移动，请添加过渡效果
- 自动播放功能-无缝滚动
- 注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断
- 此时需要添加检测过渡完成事件 transitionend
- 判断条件：如果索引号等于 3 说明走到最后一张图片，此时 索引号要复原为 0
- 此时图片，去掉过渡效果，然后移动
- 如果索引号小于0， 说明是倒着走， 索引号等于2
- 此时图片，去掉过渡效果，然后移动
关于anime.js
Anime.js (/ˈæn.ə.meɪ/) 是一个轻量的JavaScript 动画库， 拥有简单而强大的API。可对 CSS 属性、 SVG、 DOM 和JavaScript 对象进行动画。
下面我们轮播图的实现就是基于这个js插件（可以访问官网下载插件）
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</title><style>* {margin: 0;padding: 0;}ul {list-style-type: none;}.focus {position: relative;/*再移动端，如果不设置如下的样式，则其中的元素可以拖动*/overflow: hidden;}ul.focus_img {width: 600%;margin-left: -100%;/* 以iphone6 为例 375*5 */}.focus_img li {/* border: 1px solid black; */float: left;width: 16.666%;/*375*6*0.2*/}.focus_img img {width: 100%;/*375*6*0.2*/}.focus_sort {position: absolute;right: 20px;bottom: 20px;border-radius: 5px;/* border: 1px solid black; */}.focus_sort li {display: inline-block;width: 20px;height: 10px;background-color: #fff;margin-right: 10px;cursor: pointer;}.focus_sort .current {background-color: red;}</style></head><body><div class="focus"><!--轮播图片--><ul class="focus_img"><li><img src="./images/focus4.jpg" alt=""></li><li><img src="./images/focus1.webp" alt=""></li><li><img src="./images/focus2.webp" alt=""></li><li><img src="./images/focus3.jpg" alt=""></li><li><img src="./images/focus4.jpg" alt=""></li><li><img src="./images/focus1.webp" alt=""></li></ul><ul class="focus_sort"><li class="current" data-index="0"></li><li data-index="1"></li><li data-index="2"></li><li data-index="3"></li></ul></div><script>var focus_img = document.querySelector('.focus_img')var focus = document.querySelector('.focus')var focusWidth = focus.offsetWidthvar focus_sort = document.querySelector('.focus_sort')// 声明变量，用来存储轮播图的计数器var index = 0// 声明变量，存储指示器计数器var sort = 0var timer = setInterval(function () {index++var translatex = -index * focusWidthfocus_img.style.transition = 'all 1s'focus_img.style.transform = 'TranslateX(' + translatex + 'px)'// 指示器切换changeSort()}, 3000)// 切换指示器function changeSort() {// for (var i = 0; i < focus_sort.children.length; i++) {// focus_sort.children[i].className = ''// }// 将上面的代码替换成使用classList实现focus_sort.querySelector('.current').classList.remove('current')focus_sort.children[sort].className = 'current'}// 为focus_img 添加过渡结束事件(transitionend)，每当过渡效果完成后// 会触发这个事件// 如果用户快速拖动元素，在过渡没有完成的情况下就再次拖动元素，则会// 打破过渡的执行，导致不会触发这个事件focus_img.addEventListener('transitionend', function () {/*如果index==4，说明当前轮播图切换完成后，显示的是最后一张图片而最后一张图片与第一张图片一样，所以可以做如下操作：快速的将ul拖动到初始位置*/if (index == 4) {index = 0focus_img.style.transition = 'none'focus_img.style.transform = 'TranslateX(0px)'}else if (index < 0) {index = 3var translatex = -index * focusWidthfocus_img.style.transition = 'none'focus_img.style.transform = 'TranslateX(' + translatex + 'px)'}// 将九流阀设置为trueflag = truesort = indexchangeSort()})/* 实现手指拖动实现轮播效果1）手指按下，停止自动轮播，手指离开屏幕继续开启自动轮播2）实现轮播图(focus_img)随着手指的移动而移动3）手指离开屏幕后，判断用户手指的移动距离，根据距离判断是切换轮播图还是回弹轮播图4）如果用户只是按下手指，并没有移动，然后手指就离开屏幕，可以不执行第三步。：如何判断：只要用户移动手指就会触发touchmove事件，如果用户没有移动手指，不会触发这个事件*/// 声明变量，存储手指的按下时的位置var startx = 0// 声明变量，存储手指的移动距离var movex = 0// 声明一个变量，节流阀，用于指示是否可以切换轮播图；如果只为true：可以，值为false：不可以var flag = true// 定义变量，标志用户是否移动了手指isMoove = false // false 表示没有移动手指focus_img.addEventListener('touchstart', function (e) {// 停止计时器clearInterval(timer)// 获取手指按下时的位置，赋值给startxstartx = e.targetTouches[0].pageX})focus_img.addEventListener('touchmove', function (e) {// 只要用户触发了touchmove事件，就说明用户的手指在元素上移动了isMoove = trueif (flag) {// 获取手指的移动距离movex = e.targetTouches[0].pageX - startx// 计算focus_img 的新坐标：原始位置+手指移动距离var translatex = - index * focusWidth + movexfocus_img.style.transition = 'none'this.style.transform = 'TranslateX(' + translatex + 'px)'}})focus_img.addEventListener('touchend', function () {if (!isMoove) {return false}isMoove = falseconsole.log(movex);if (flag) {// 将节流阀设置为falseflag = false// console.log(movex);if (Math.abs(movex) >= 50) {if (movex > 0) {index--} else {index++}var translatex = -index * focusWidthfocus_img.style.transition = 'all 1s'this.style.transform = 'TranslateX(' + translatex + 'px)'} else {// 显示当前的轮播图var translatex = -index * focusWidthfocus_img.style.transition = 'all .3s'this.style.transform = 'TranslateX(' + translatex + 'px)'}}// 重新开启自动轮播图clearInterval(timer)timer = setInterval(function () {index++var translatex = -index * focusWidthfocus_img.style.transition = 'all 1s'focus_img.style.transform = 'TranslateX(' + translatex + 'px)'}, 3000)})</script>
</body></html>
✨原创不易，还希望各位大佬支持一下\textcolor{blue}{原创不易，还希望各位大佬支持一下}原创不易，还希望各位大佬支持一下
手撸移动端轮播图（内含源码）相关推荐
- HTML+JavaScript网页背景轮播图完整源码
轮播图运行效果 轮播图实现完整源码 <!DOCTYPE html> <html lang="en">
- 手机端网页制作轮播图html怎么写,原生JS实现移动端web轮播图详解（结合Tween算法造轮子）...
前言 相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是 使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改 ...
- 移动端实现文字轮播_js实现移动端轮播图
本文实例为大家分享了js实现移动端轮播图的具体代码,供大家参考,具体内容如下 这是结构 Document 这是CSS /* 搜索部分 */ .jd_layout{ width: 100%; max-w ...
- js 移动端网页特效+移动端轮播图案例+移动端常用开发插件的使用
触屏事件 常见触屏事件: 触屏touch事件 说明 touchstart 手指触摸到DOM元素时触发 touchmove 手指在DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触 ...
- jquery，js实现手机端全屏轮播图手动滑动+自动切换(autoplay)
jquery,js实现手机端全屏轮播图 使用了swiper插件,可手动滑动切换也可自动切换 效果图 css代码 只是作为参考,可以根据你自己的需求去改,这里我用的是上下两张背景图,图自行修改 html ...
- vue移动端轮播图适配宽高
vue移动端轮播图适配宽高 /** 初始化轮播图的高度 */initSwipeHeight(){console.log(window.screen.width)let picw = 1242; // ...
- 移动端网页特效移动端轮播图
触屏事件 移动端浏览器兼容性较好,无需考虑JS兼容问题,但是移动端也有自己独特之处,比如触屏事件touch (也称触摸事件)Android和IOS都有 touch对象代表一个触摸点 ,触屏事件可响应用 ...
- 使用Hammer制作移动端轮播图
需求 最近公司官网改版 手机端新的设计稿中有个轮播效果 如下图: 这个轮播图要求有三个效果 左右滑动可以切换 不循环轮播 上面列表中的文案要求高亮的尽量居中 类似今日头条app那种滑动切换 上面列表中 ...
- html5移动端轮播图特效,支持移动端的纯js轮播图插件awesome-slider
awesome-slider是一款支持移动端的纯js轮播图插件.该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用. 使用方法 安装: /* y ...
最新文章
- CentOS 6.5下SSH总提示Warning: Permanently added '****' (RSA) to the list of known hosts.
- 信不信这29 个阿里开源项目里肯定有你用过的？
- Asp.Net中几种相似数据绑定标记符号的解释及用法
- 【Python面试】 说说Python面向对象三大特性?
- 9适应之力加多少攻击_剑盾铠之孤岛DLC新增内容大全! 宝可梦史上第一款DLC到底香不香（含试玩视频）...
- 如果不懂Service mesh，就不要谈微服务了
- 【高并发解决方案】1、高并发解决方案汇总
- 14c语言合并两个字符串,C语言的标识符和字符数据、字符串数据.ppt
- 最新前端四天精通node.js视频教程
- 使用ffmpeg转换webm格式到MP4格式
- 如何去除Excel图表网格线？
- 2018招行笔试分红包
- 二十一世纪的计算研讨会及启示
- MySQL基础教程---创建、查询、备份数据库
- 北京六天十次面试，已拿到offer，面试题和总结分享（Java岗）
- 「工具」三分钟了解一款在线流程绘制工具：Whimsical
- n-gram语言模型LM
- webpack系列：webpack小老弟接了个简单活
- 五大常用算法——分支限界算法详解及经典例题
- 与IT相关的英文缩写
热门文章
- 看奥运之一：实力是最重要的
- 动画理解Dijkstra算法过程
- 64位Ubuntu kylin 16.04使用fastboot下载内核到tiny4412开发板
- java教程菜鸟教程组合模式,组合实体模式
- 循环机换变速箱油教程_水箱内全是油, 变速箱内全是水！看师傅怎么修...
- java中this_多学习才能多赚钱之：java中this什么用
- java 数字图片识别_java – 识别图像中的数字
- python计算面积折线图_Python交互图表可视化Bokeh：4. 折线图| 面积图
- linux的apache安装在哪个目录,在linux系统下apache的默认安装路径在哪
- 团队行为心理学读书笔记（8）绩效考核背后的行为心理学