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*/ } .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 index = 0 // 声明变量,存储指示器计数器 var sort = 0 var timer = setInterval(function () { index++ var translatex = -index * focusWidth focus_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 = 0 focus_img.style.transition = 'none' focus_img.style.transform = 'TranslateX(0px)' } else if (index < 0) { index = 3 var translatex = -index * focusWidth focus_img.style.transition = 'none' focus_img.style.transform = '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 if (flag) { // 获取手指的移动距离 movex = e.targetTouches[0].pageX - startx // 计算focus_img 的新坐标:原始位置+手指移动距离 var translatex = - index * focusWidth + movex focus_img.style.transition = 'none' this.style.transform = '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_img.style.transition = 'all 1s' this.style.transform = 'TranslateX(' + translatex + 'px)' } else { // 显示当前的轮播图 var translatex = -index * focusWidth focus_img.style.transition = 'all .3s' this.style.transform = 'TranslateX(' + translatex + 'px)' } } // 重新开启自动轮播图 clearInterval(timer) timer = setInterval(function () { index++ var translatex = -index * focusWidth focus_img.style.transition = 'all 1s' focus_img.style.transform = 'TranslateX(' + translatex + 'px)' }, 3000) }) </script> </body> </html>
赞 (0)