JavaScript+css+HTML实现移动端轮播图（含源码）⽬录
1.移动轮播图
2.案例分析
3.关于anime.js
1.移动轮播图
移动端轮播图与PC段轮播图，在技术选择上是有区别的，因为移动端的浏览器版本⾮常好，对于H5和CSS3的⽀持⾮常完美，所以很多效果可以CSS3的⽅式实现，⽐如可以使⽤Transorm 属性替代原来的动画函数
可以⾃动播放图⽚
⼿指可以拖动播放轮播图
添加指⽰器，但只起到指⽰作⽤，点击不能切换图⽚
不需要左右导航
因为移动端轮播图的宽度⼀般与屏幕⼀样宽，所以focus不设置宽度
移动端使⽤CSS3的⽅式进⾏图⽚切换，所以可以给 focus_img 去掉定位和 left属性
因为li标签设置为float:left 后，就变成了⾏内块元素，其宽度由内容决定，⽽其内容图⽚的宽度为520,，所以导致第四章图⽚被记下来，解决⽅案：设置每个li标签的宽度为ul的20%，再设置图⽚的宽度与li标签⼀样狂
2.案例分析
⾃动播放功能
开启定时器
移动端移动，可以使⽤translate 移动
想要图⽚优雅的移动，请添加过渡效果
⾃动播放功能-⽆缝滚动
注意，我们判断条件是要等到图⽚滚动完毕再去判断，就是过渡完成后判断
此时需要添加检测过渡完成事件 transitionend
判断条件：如果索引号等于 3 说明⾛到最后⼀张图⽚，此时索引号要复原为 0
此时图⽚，去掉过渡效果，然后移动
如果索引号⼩于0，说明是倒着⾛，索引号等于2
此时图⽚，去掉过渡效果，然后移动
3.关于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*/
}如何下载javascript
.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.offsetWidth
var focus_sort = document.querySelector('.focus_sort')
// 声明变量，⽤来存储轮播图的计数器
// 声明变量，存储指⽰器计数器
var sort = 0
var timer = setInterval(function () {
index++
var translatex = -index * focusWidth
focus_ansition = 'all 1s'
focus_ansform = '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').ve('current')
focus_sort.children[sort].className = 'current'
}
// 为focus_img 添加过渡结束事件(transitionend)，每当过渡效果完成后
// 会触发这个事件
// 如果⽤户快速拖动元素，在过渡没有完成的情况下就再次拖动元素，则会
// 打破过渡的执⾏，导致不会触发这个事件
focus_img.addEventListener('transitionend', function () {
/
*如果index==4，说明当前轮播图切换完成后，显⽰的是最后⼀张图⽚
⽽最后⼀张图⽚与第⼀张图⽚⼀样，所以可以做如下操作：
快速的将ul拖动到初始位置*/
if (index == 4) {
index = 0
focus_ansition = 'none'
focus_ansform = 'TranslateX(0px)'
}
else if (index < 0) {
index = 3
var translatex = -index * focusWidth
focus_ansition = 'none'
focus_ansform = 'TranslateX(' + translatex + 'px)'
}
// 将九流阀设置为true
flag = true
sort = index
changeSort()
})
/* 实现⼿指拖动实现轮播效果
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)
// 获取⼿指按下时的位置，赋值给startx
startx = e.targetTouches[0].pageX
})
focus_img.addEventListener('touchmove', function (e) {
// 只要⽤户触发了touchmove事件，就说明⽤户的⼿指在元素上移动了
isMoove = true
// 获取⼿指的移动距离
movex = e.targetTouches[0].pageX - startx
/
/ 计算focus_img 的新坐标：原始位置+⼿指移动距离
var translatex = - index * focusWidth + movex
focus_ansition = 'none'
ansform = 'TranslateX(' + translatex + 'px)'
}
})
focus_img.addEventListener('touchend', function () {
if (!isMoove) {
return false
}
isMoove = false
console.log(movex);
if (flag) {
// 将节流阀设置为false
flag = false
// console.log(movex);
if (Math.abs(movex) >= 50) {
if (movex > 0) {
index--
} else {
index++
}
var translatex = -index * focusWidth
focus_ansition = 'all 1s'
ansform = 'TranslateX(' + translatex + 'px)'
} else {
// 显⽰当前的轮播图
var translatex = -index * focusWidth
focus_ansition = 'all .3s'
ansform = 'TranslateX(' + translatex + 'px)'
}
}
// 重新开启⾃动轮播图
clearInterval(timer)
timer = setInterval(function () {
index++
var translatex = -index * focusWidth
focus_ansition = 'all 1s'
focus_ansform = 'TranslateX(' + translatex + 'px)' }, 3000)
})
</script>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论