JavaScript+css+HTML实现移动端轮播图（含源码）

更新时间：2022年01月26日 17:52:35 作者：几何心凉

这篇文章主要介绍了JavaScript+css+HTML实现移动端轮播图并含源码的分享，需要的小伙伴可以参考一下，希望对你有所帮助

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>

您可能感兴趣的文章:

超酷的网页音乐播放器DewPlayer使用方法
在网上闲逛的时候无意中看到 Dewplayer 播放器，感觉不错，特此分享。
2010-12-12
javascript自定义事件功能与用法实例分析
这篇文章主要介绍了javascript自定义事件功能与用法,结合实例形式较为详细的分析了javascript自定义事件的原理、功能、应用与相关注意事项,需要的朋友可以参考下
2017-11-11
js异或运算符^小技巧分享
这篇文章主要介绍了js异或运算符^小技巧，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
全系IE支持Bootstrap的解决方法
用了bootstrap模版搭建的网站，在IE7中打不开，在IE8中背景图片都不显示，内容排列也出现问题，在IE9中表现的最好，在IE11中出现弹出层中的图片无法显示，那么这些兼容性怎么去解决
2015-10-10
JavaScript实现随机产生字符串的方法分享
这篇文章主要为大家详细介绍了JavaScript中实现随机产生字符串的方法，文中的示例代码简洁易懂，对我们学习JavaScript有一定的帮助，需要的可以参考一下
2022-11-11
JavaScript的递归之递归与循环示例介绍
对于不同类型的需要重复计算的问题，循环和递归两种方法各有所长，能给出更直观简单的方案，下面为大家详细的介绍下JavaScript的递归与循环，感兴趣的朋友可以了解下
2013-08-08
微信小程序实战之网易云音乐歌曲详情页实现代码
本文给大家介绍了微信小程序学习记录之网易云音乐歌曲详情页代码实现,代码分为html、css和js部分，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-05-05
Web js实现复制文本到粘贴板
这篇文章主要为大家详细介绍了Web js实现复制文本到粘贴板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
解决wx.onMenuShareTimeline出现的问题
本文主要介绍解决wx.onMenuShareTimeline出现的问题，这里提供了示例代码作为参考，有需要的小伙伴可以参考下
2016-08-08
微信小程序自定义toast的实现代码
这篇文章主要介绍了微信小程序自定义toast的实现代码,本文以toast为例通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-11-11