手撸移动端轮播图（内含源码）

移动轮播图

移动端轮播图与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}{原创不易，还希望各位大佬支持一下}$

👍 $点赞，你的认可是我创作的动力！\textcolor{green}{点赞，你的认可是我创作的动力！}$

⭐️ $收藏，你的青睐是我努力的方向！\textcolor{green}{收藏，你的青睐是我努力的方向！}$

✏️ $评论，你的意见是我进步的财富！\textcolor{green}{评论，你的意见是我进步的财富！}$