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)

相关推荐

  • js实现支持手机滑动切换的轮播图片效果实例

    本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

  • 使用html+js+css 实现页面轮播图效果(实例讲解)

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=

  • 原生javascript+CSS实现轮播图效果

    本文实例为大家分享了javascript+CSS实现轮播图效果的具体代码,供大家参考,具体内容如下 1.html <ul id="banner" ></ul> 2.css ul{ list-style:none; position: absolute; padding: 0; left: 0; right: 0; bottom: 0; top:0; margin:auto; width: 800px; height:200px; } 3.js //生成轮播图 e

  • JS轮播图实现简单代码

    本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播

  • JS+CSS实现3D切割轮播图

    本文实例为大家分享了JS+CSS实现3D切割轮播图的具体代码,供大家参考,具体内容如下 第一步:我们首先要通过CSS来完成一个基本布局,利用 transform-style: preserve-3d设置成3D. 下面是CSS部分的代码 * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } /* 轮播图 */ .homePage { width: 800px; height: 200px; mar

  • js实现轮播图的完整代码

    今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->

  • JS+css3实现幻灯片轮播图

    本文实例为大家分享了JS+css3实现幻灯片轮播图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; -webkit-touch-callout: none; -webkit-user-select: none;

  • js+css实现卡片轮播图效果

    本文实例为大家分享了js+css实现卡片轮播图效果的具体代码,供大家参考,具体内容如下 实现点击的时候切换卡片,自动轮播,鼠标移入暂停,移出继续轮播,有动画事件效果就是这样 下面是代码 <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge

  • 原生js实现轮播图的示例代码

    很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea

  • js实现点击左右按钮轮播图片效果实例

    本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un

随机推荐