day17 运动(下)

已于 2024-03-19 16:31:34 修改
阅读量18 收藏
点赞数
分类专栏： 学习js 文章标签： 前端 javascript 开发语言
于 2023-03-01 19:59:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45868310/article/details/129288202
版权
文章详细介绍了使用HTML、CSS和JavaScript实现不同类型的轮播图，包括位置变化轮播、透明度轮播、图片切换轮播以及无缝轮播，并提供了具体的代码示例。此外，还提到了第三方动画库move.js和轮播图插件Swiper的应用方法。
摘要由CSDN通过智能技术生成

运动的要素

  • 当前值
  • 目标值
  • 迭代量

运动分类

  • 匀速运动(迭代量不变)
  • 缓冲运动(迭代量递减)
  • 链式运动 (通过回调函数来执行下一个动画)

 轮播图 

控制对应的图片轮播,主要方式有:

  • 位置变化轮播
  • 透明度轮播
  • 图片切换轮播

位置变化轮播 

  • 要将对应的图片放在一行(横向)或者一列(纵向)
  • 实际控制移动的是外面的大盒子(定位)的移动(切换对应的left值或者top值)
  • 大盒子的定位要基于展示的盒子 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .show{
            width: 590px;
            height: 470px;
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        ul{
            width: 500%;
            height: 100%;
            overflow: hidden;
            position: absolute;
        }
        ul>li{
            width: 590px;
            height: 470px;
            list-style: none;
            float: left;
        }
        li>img{
            width: 590px;
            height: 470px;
        }
    </style>
</head>
<body>
    <!-- 用于展示的大盒子 -->
    <div class="show">
        <ul class="content">
            <li>
                <img src="//imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e9/f4969bf9/cr/s/q.jpg" alt="">
            </li>
            <li>
                <img src="//imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000368/100032097981/FocusFullshop/CkRqZnMvdDEvMjAyMTczLzEyLzMxMjU3LzI3MDMxNi82M2VhOGNjMkY1MWZhOTA4NS9hOGZjNzU4MTYzYzU0MDc1LnBuZxIJNS10eV8wXzU2MAI48It6QhMKD-mHkee6uuaflOmhuuWJghABQhMKD-S8mOaDoOS6q-S4jeWBnBACQhAKDOeri-WNs-aKoui0rRAGQgoKBuWKm-iNkBAHWL3dgtP0Ag/cr/s/q.jpg" alt="">
            </li>
            <li>
                <img src="//imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/72249517930/FocusFullshop/CkNqZnMvdDEvMTk5NzgxLzMxLzMxNjc1LzMwNDY1LzYzZmQwNjBiRjlkMTlkZDhlL2NlNDBlMTgyNGFjN2EzN2MucG5nEgk0LXR5XzBfNTUwAjjui3pCEAoM5rW35bCU5Yaw566xEAFCFAoQ56eS5p2A5Lu3NDU5OC45ORACQhAKDOeri-WNs-aKoui0rRAGQgoKBuS8mOi0qBAHWOrOoJONAg/cr/s/q.jpg" alt="">
            </li>
            <li>
                <img src="//imgcps.jd.com/ling4/100034738701/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f5/17e33faf/cr/s/q.jpg" alt="">
            </li>
            <li>
                <img src="//imgcps.jd.com/ling4/100015163119/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f1/2496405c/cr/s/q.jpg" alt="">
            </li>
        </ul>
    </div>
    <script src="./animated.js"></script>
    <script>
        //获取对应的ul这个元素
        var ul=document.querySelector('.content')
        //获取对应的显示盒子的大小
        var show = document.querySelector('.show')
        var width = show.clientWidth
        var height = show.clientHeight
        //设置对应的定时器控制ul的移动
        //用下标来表示对应切换的图片是哪一张
        var index = 0
        setInterval(()=>{
            bufferAnimation(ul,{
                left:-1 * width * index
            })
            index++
            //如果到达最后一张变成第一张
            if(index>4){
                index=0
            }
        },2000)
    </script>
</body>
</html>

    透明度轮播

  • 控制对应的li的透明度的变化
  • 第一个切换到第二个的时候 第一个需要隐藏 第二个需要显示 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .show{
            width: 590px;
            height: 470px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        ul{
            width: 500%;
            height: 100%;
            overflow: hidden;
            position: absolute;
        }
        ul>li{
            width: 590px;
            height: 470px;
            list-style: none;
            position: absolute;
            opacity: 0;
        }
        li>img{
            width: 590px;
            height: 470px;
        }
        ul>li:first-child{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="show">
        <ul class="content">
            <li>
                <img src="//imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e9/f4969bf9/cr/s/q.jpg" alt="">
            </li>
            <li>
                <img src="//imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000368/100032097981/FocusFullshop/CkRqZnMvdDEvMjAyMTczLzEyLzMxMjU3LzI3MDMxNi82M2VhOGNjMkY1MWZhOTA4NS9hOGZjNzU4MTYzYzU0MDc1LnBuZxIJNS10eV8wXzU2MAI48It6QhMKD-mHkee6uuaflOmhuuWJghABQhMKD-S8mOaDoOS6q-S4jeWBnBACQhAKDOeri-WNs-aKoui0rRAGQgoKBuWKm-iNkBAHWL3dgtP0Ag/cr/s/q.jpg" alt="">
            </li>
            <li>
                <img src="//imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/72249517930/FocusFullshop/CkNqZnMvdDEvMTk5NzgxLzMxLzMxNjc1LzMwNDY1LzYzZmQwNjBiRjlkMTlkZDhlL2NlNDBlMTgyNGFjN2EzN2MucG5nEgk0LXR5XzBfNTUwAjjui3pCEAoM5rW35bCU5Yaw566xEAFCFAoQ56eS5p2A5Lu3NDU5OC45ORACQhAKDOeri-WNs-aKoui0rRAGQgoKBuS8mOi0qBAHWOrOoJONAg/cr/s/q.jpg" alt="">
            </li>
            <li>
                <img src="//imgcps.jd.com/ling4/100034738701/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f5/17e33faf/cr/s/q.jpg" alt="">
            </li>
            <li>
                <img src="//imgcps.jd.com/ling4/100015163119/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f1/2496405c/cr/s/q.jpg" alt="">
            </li>
        </ul>
    </div>
    <script src="./animated.js"></script>
    <script>
        //获取对应的ul下面的所有li
        var lis =document.querySelector('.content').children
        //定时器控制对应的li变化
        //记录对应的下标
        var index = 0
        setInterval(()=>{
            //前一张的index
            prevIndex = index
            //当前的index
            index++
            if(index>=lis.length){
                index=0
            }
            //先隐藏第一张 再显示第二张
            bufferAnimation(lis[prevIndex],{
                opacity:0
            })
            bufferAnimation(lis[index],{
                opacity:1
            })
        },2000)
        
    </script>
</body>
</html>

    切换图片轮播

  • 控制对应的图片的切换 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .show {
            width: 590px;
            height: 470px;
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="show">
        <img src="//imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e9/f4969bf9/cr/s/q.jpg"
            alt="">
    </div>
    <script src="./animated.js"></script>
    <script>
        var imgs = ['//imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e9/f4969bf9/cr/s/q.jpg',
            '//imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000368/100032097981/FocusFullshop/CkRqZnMvdDEvMjAyMTczLzEyLzMxMjU3LzI3MDMxNi82M2VhOGNjMkY1MWZhOTA4NS9hOGZjNzU4MTYzYzU0MDc1LnBuZxIJNS10eV8wXzU2MAI48It6QhMKD-mHkee6uuaflOmhuuWJghABQhMKD-S8mOaDoOS6q-S4jeWBnBACQhAKDOeri-WNs-aKoui0rRAGQgoKBuWKm-iNkBAHWL3dgtP0Ag/cr/s/q.jpg',
            '//imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/72249517930/FocusFullshop/CkNqZnMvdDEvMTk5NzgxLzMxLzMxNjc1LzMwNDY1LzYzZmQwNjBiRjlkMTlkZDhlL2NlNDBlMTgyNGFjN2EzN2MucG5nEgk0LXR5XzBfNTUwAjjui3pCEAoM5rW35bCU5Yaw566xEAFCFAoQ56eS5p2A5Lu3NDU5OC45ORACQhAKDOeri-WNs-aKoui0rRAGQgoKBuS8mOi0qBAHWOrOoJONAg/cr/s/q.jpg',
            '//imgcps.jd.com/ling4/100034738701/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f5/17e33faf/cr/s/q.jpg',
            '//imgcps.jd.com/ling4/100015163119/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f1/2496405c/cr/s/q.jpg']
        var img = document.querySelector('.show>img')
        //定时器控制对应的img的src路径变化
        var index = 0//记录是哪张图片
        setInterval(()=>{
            if(index==imgs.length){
                index=0
            }
            img.src = imgs[index]
            index++
        },1000)
    </script>
</body>

</html>

    无缝轮播

  • 保证第一张和最后一张之间没有缝隙

  • 给最后一张后面添加一个第一张(那么我们就有最后一张向第一张切换的过程)

  • 当最后一张切换到第一张完成后 需要将对应的定位变成第一张的位置

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .show {
            width: 590px;
            height: 470px;
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        ul {
            width: 600%;
            height: 100%;
            overflow: hidden;
            position: absolute;
        }

        ul>li {
            width: 590px;
            height: 470px;
            list-style: none;
            float: left;
        }

        li>img {
            width: 590px;
            height: 470px;
        }
    </style>
</head>

<body>
    <div class="show">
        <ul class="content">
            <li>
                <img src="//imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e9/f4969bf9/cr/s/q.jpg"
                    alt="">
            </li>
            <li>
                <img src="//imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000368/100032097981/FocusFullshop/CkRqZnMvdDEvMjAyMTczLzEyLzMxMjU3LzI3MDMxNi82M2VhOGNjMkY1MWZhOTA4NS9hOGZjNzU4MTYzYzU0MDc1LnBuZxIJNS10eV8wXzU2MAI48It6QhMKD-mHkee6uuaflOmhuuWJghABQhMKD-S8mOaDoOS6q-S4jeWBnBACQhAKDOeri-WNs-aKoui0rRAGQgoKBuWKm-iNkBAHWL3dgtP0Ag/cr/s/q.jpg"
                    alt="">
            </li>
            <li>
                <img src="//imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/72249517930/FocusFullshop/CkNqZnMvdDEvMTk5NzgxLzMxLzMxNjc1LzMwNDY1LzYzZmQwNjBiRjlkMTlkZDhlL2NlNDBlMTgyNGFjN2EzN2MucG5nEgk0LXR5XzBfNTUwAjjui3pCEAoM5rW35bCU5Yaw566xEAFCFAoQ56eS5p2A5Lu3NDU5OC45ORACQhAKDOeri-WNs-aKoui0rRAGQgoKBuS8mOi0qBAHWOrOoJONAg/cr/s/q.jpg"
                    alt="">
            </li>
            <li>
                <img src="//imgcps.jd.com/ling4/100034738701/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f5/17e33faf/cr/s/q.jpg"
                    alt="">
            </li>
            <li>
                <img src="//imgcps.jd.com/ling4/100015163119/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f1/2496405c/cr/s/q.jpg"
                    alt="">
            </li>
        </ul>
    </div>
    <script src="./animated.js"></script>
    <script>
        //获取对应的ul这个元素
        var ul = document.querySelector('.content')
        //获取对应的显示盒子的大小
        var show = document.querySelector('.show')
        var width = show.clientWidth
        //记录初始的个数
        var size = ul.children.length
        //在最后一张后面添加一个第一张
        ul.appendChild(ul.firstElementChild.cloneNode(true))
        //声明index记录对应的图片位置
        var index = 0
        setInterval(() => {
            index++
            //切换位置
            bufferAnimation(ul,{
                left:-1*index*width
            },()=>{
                    //到达最后一张变为0
                if(index>=size){
                    index=0
                    //对应的位置要变成第一张的位置
                    ul.style.left = '0px'
                }
            })
        }, 2000);
    </script>
</body>

</html>
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .show {
            width: 590px;
            height: 470px;
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .content {
            width: 600%;
            height: 100%;
            overflow: hidden;
            position: absolute;
        }

        .content>li {
            width: 590px;
            height: 470px;
            list-style: none;
            float: left;
        }

        li>img {
            width: 590px;
            height: 470px;
        }
        .list{
            position: absolute;
            bottom: 10px;
            right: 20px;
            list-style: none;
        }
        .list>li{
            float: left;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            line-height: 30px;
            text-align: center;
            background-color: aquamarine;
        }
        .list>.selected{
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="show">
        <ul class="content">
            <li>
                <img src="//imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e9/f4969bf9/cr/s/q.jpg"
                    alt="">
            </li>
            <li>
                <img src="//imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000368/100032097981/FocusFullshop/CkRqZnMvdDEvMjAyMTczLzEyLzMxMjU3LzI3MDMxNi82M2VhOGNjMkY1MWZhOTA4NS9hOGZjNzU4MTYzYzU0MDc1LnBuZxIJNS10eV8wXzU2MAI48It6QhMKD-mHkee6uuaflOmhuuWJghABQhMKD-S8mOaDoOS6q-S4jeWBnBACQhAKDOeri-WNs-aKoui0rRAGQgoKBuWKm-iNkBAHWL3dgtP0Ag/cr/s/q.jpg"
                    alt="">
            </li>
            <li>
                <img src="//imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/72249517930/FocusFullshop/CkNqZnMvdDEvMTk5NzgxLzMxLzMxNjc1LzMwNDY1LzYzZmQwNjBiRjlkMTlkZDhlL2NlNDBlMTgyNGFjN2EzN2MucG5nEgk0LXR5XzBfNTUwAjjui3pCEAoM5rW35bCU5Yaw566xEAFCFAoQ56eS5p2A5Lu3NDU5OC45ORACQhAKDOeri-WNs-aKoui0rRAGQgoKBuS8mOi0qBAHWOrOoJONAg/cr/s/q.jpg"
                    alt="">
            </li>
            <li>
                <img src="//imgcps.jd.com/ling4/100034738701/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f5/17e33faf/cr/s/q.jpg"
                    alt="">
            </li>
            <li>
                <img src="//imgcps.jd.com/ling4/100015163119/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f1/2496405c/cr/s/q.jpg"
                    alt="">
            </li>
        </ul>
        <ul class="list">
            <li class="selected">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <script src="./animated.js"></script>
    <script>
        var ul = document.querySelector('.content')
        var show = document.querySelector('.show')
        var width = show.clientWidth
        var size = ul.children.length
        ul.appendChild(ul.firstElementChild.cloneNode(true))
        var index = 0
        //var selectCir = 0 //max=4 0-4
        setInterval(() => {
            index++//最大值为5 0-5
            //selectCir = index%size
            move()
        }, 2000);
        //获取所有焦点包含ul的元素
        var list = document.querySelector('.list')
        //封装一个函数 专门用于给对应的焦点添加选中效果
        function selected(){
            //排他思想
            //list下的所有li设置class为空
            Array.from(list.children).forEach((li)=>{
                li.className = ''
            })
            //再将选中的li 设置为对应的selected
            list.children[index%size].className = 'selected'
        }
        //利用事件委托给焦点添加点击事件
        list.onclick = function(e){
            e = e || window.event
            if(e.target.tagName=='LI'){
                //得到当前点击的li的下标
                var i = Array.from(list.children).findIndex((li)=>{
                    return li == e.target
                })
                //给全局的index赋值
                index = i
                move()
            }
        }
        function move(){
            selected()
            bufferAnimation(ul,{
                left:-1*index*width
            },()=>{
                if(index>=size){
                    index=0
                    ul.style.left = '0px'
                }
            })
        }
    </script>
</body>

</html>

    进阶轮播图封装

    //声明对应的变量
var warp, size, ul, width, height, list, arrow
//声明index记录对应的图片位置
var index = 0
//声明定时器
var timer, timerout
//声明是否纵向
var isY
//封装对应的方法
//封装移动的方法
//isY表示对应的方向 true表示纵向 false表示横向 
//isDesc 是否逆时针  right false  left true index值是增加还是减少
function move(isDesc) {
  let key = isY ? 'top' : 'left'
  let distance = isY ? height : width
  if (isDesc && index <= 0) {
    index = size
    //位置发生改变
    ul.style[key] = `${index * -1 * distance}px`
  }
  //判断对应的最大值
  if (!isDesc && index >= size) {
    index = 0
    //位置发生改变
    ul.style[key] = `${index * -1 * distance}px`
  }
  //是否逆时针 逆时针就减少 顺时针就增加
  isDesc ? index-- : index++
  //开始移动
  //焦点切换
  selected()
  //切换位置
  if (isY) {
    bufferAnimation(ul, {
      top: -1 * index * height
    })
  } else {
    bufferAnimation(ul, {
      left: -1 * index * width
    })
  }
}
//封装一个函数 专门用于给对应的焦点添加选中效果
function selected() {
  //排他思想 
  //list下的所有li设置class为空
  Array.from(list.children).forEach((li) => {
    li.className = ''
  })
  //再将选中的li 设置为对应的selected
  list.children[index % size].className = 'selected'
}
//封装初始化的方法
function init(element, disction) {
  //赋值传进来的元素
  warp = element
  //赋值方向
  isY = disction
  //获取对应的元素
  ul = warp.querySelector('.content')
  width = warp.clientWidth
  height = warp.clientHeight
  //获取所有的焦点包含的ul元素
  list = warp.querySelector('.list')
  //获取箭头包含的div
  arrow = warp.querySelector('.arrow')
  //记录初始的个数
  size = ul.children.length
  //声明index记录对应的图片位置
  //根据图片的个数去生成对应的焦点
  Array.from(ul.children).forEach((v, i) => {
    let li = document.createElement('li')
    li.innerText = i + 1
    //给第一个添加对应的selected
    if (i == 0) {
      li.className = 'selected'
    }
    //再将声明的li添加给ul
    list.appendChild(li)
  })
  //在最后一张后面添加一个第一张
  ul.appendChild(ul.firstElementChild.cloneNode(true))
  //给对应的生成的li及对应的箭头添加事件
  //给焦点添加点击事件
  //利用事件委托
  list.onclick = function (e) {
    e = e || window.event
    if (e.target.tagName == 'LI') {
      //得到当前点击的li的下标
      var i = Array.from(list.children).findIndex((li) => {
        return li == e.target
      })
      //给全局的index赋值
      index = i - 1
      //调用移动的方法
      move()
      delay()
    }
  }
  //利用事件委托给箭头添加事件
  arrow.onclick = (e) => {
    e = e || window.event
    //判断是否点击的是a
    if (e.target.tagName = 'A') {
      e.preventDefault();
      //下标只有俩个 要不为0 要不为0
      move(!Array.from(arrow.children).findIndex((a) => {
        return a == e.target
      }))
      delay()
    }
  }
  //调用自动移动的方法
  autoMove()
}
//等待1s 再轮播
function delay(time = 1000) {
  clearTimeout(timerout)
  clearInterval(timer)
  //等待一秒
  timerout = setTimeout(() => {
    autoMove()
  }, time)
}
//封装一个自动轮播的方法
function autoMove() {
  timer = setInterval(() => {
    move()
  }, 2000);
}

    第三方动画库 move.js(https://github.com/visionmedia/move.js)

    <script>
//move.js主要利用的css3的2d转换
move('.box') //传入选择器
.
to(500, 200) //位置到达500 ,200
.
rotate(180) //旋转180deg
.
scale(.5) //缩放
.
set('background-color', '#888') //设置颜色
.
set('border-color', 'black') //设置边框颜色
.
duration('2s') //时间
.
skew(50, -10)//偏移
.
then() //成功以后
.
set('opacity', 0) //透明度设置
.
duration('0.3s') //时间
.
scale(0.1) //缩放
.
pop() //删除第一个
end(); //结束
</script>

    轮播图的第三方插件 swiper(Swiper中文网-轮播图幻灯片js插件,H5页面前端开发)

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta name=
"
viewport" content="width=device-width, initial-scale=1, minimum-
scale=1, maximum-scale=1" />
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="./swiper-bundle.min.css" />
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.
swiper {
width: 100%;
height: 100%;
}
.
swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-
webkit-box-pack: center;
-
ms-flex-pack: center;
-
webkit-justify-content: center;
justify-content: center;
-
webkit-box-align: center;
-
ms-flex-align: center;
-
webkit-align-items: center;
align-items: center;
}
.
swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination a"></div>
<div class="swiper-button-prev"></div>
<!--左箭头。如果放置在swiper外面，需要自定义样式。-->
<div class="swiper-button-next"></div>
<!--右箭头。如果放置在swiper外面，需要自定义样式。-->
</div>
<!-- Swiper JS -->
<script src="./swiper-bundle.js"></script>
<!-- Initialize Swiper -->
<script>
//构造函数的机制
var swiper = new Swiper(".swiper", {
//分页点
pagination: {
el: ".a", //生成的分页点显示的位置
},
loop: true,
autoplay: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>

komorebi. z Z
关注
专栏目录
Day40 JMeter的使用（下）
lookout99的博客
09-19 1681
jmeter直连mysql、逻辑控制器、定时器：同步定时器、常数吞吐量定时器、固定定时器 分布式、监听、并发数计算、性能监控、第三方插件下载
巴巴运动网day01
02-14
根据给定的“巴巴运动网day01”的文档信息，我们可以从中提炼出多个重要的IT知识点和技术要点，下面将逐一详细阐述这些技术要点及其在实际项目中的应用。 ### 1. 商城系统业务分析与环境搭建 #### 学习点： - **...
day20 - 绘制物体的运动轨迹
九灵猴君的博客
05-25 1917
绘制物体的运动轨迹
C++基础编程DAY17(day)
茄子爱跑步的博客
12-03 1233
37、写一个程序，进行体操评分，依次输入10名评委所评分数，去除一个最高分和一个最低分，再算出平均分作为选手的得分 //写一个程序，进行体操评分，依次输入10名评委所评分数， //去除一个最高分和一个最低分，再算出平均分作为选手的得分。 #include<iostream> #include<stdlib.h> using namespace std; float g...
The Thirty-fifth Of Word-Day
威少（微笑）
07-08 1160
目录 一：文章 二：单词 三：句子 一：文章 A: I also dislike having to listen to advertisements when they are broadcast in stores or on the subway. B: I couldn’t agree more. That annoys me too. With billboards,...
机器人运动指令
Tunny_one
10-12 1197
机器人运动指令
【AI大模型】在运动项目的深度融合和在穿戴设备的实践及未来运动健康技术发展
热门推荐
结合项目案例，记录点点滴滴，自己回顾，分享他人o__o
06-17 2万+
通过详细分析AI大模型在穿戴设备运动监测中的深度融合应用，包括技术架构、模型选择、数据处理、实时性要求和隐私保护，可以更好地理解其应用场景和技术实现。选择适合的模型并进行优化，确保数据隐私和安全，是实现智能化运动监测系统的关键。未来，随着技术的不断进步，这种智能化的运动监测系统将会越来越普及，为用户提供更全面和个性化的健康管理服务。
Day26 - Day30
清影的博客
06-12 763
Day26 - Day30
day3
zhangjialingliga的博客
06-17 1739
连写：transition：width 2s linear 只有一个时间--运动执行时间 有两个时间的时候，第一个代表运动的执行时间，第二个代表延迟时间 其余的取值不分先后顺序。控制过度的属性 transition-property：background---color，wink。减速：transition-timing-function：ease-out。连写---不分先后顺序----取值和取值之间用空格隔开。高度：上边框+上内边框+内容的高度+下内边框+下边框。
day0624
m0_71108047的博客
06-24 1521
隐藏后,不保留位置隐藏后站位。
ROS之MoveIt!运动规划框架
zhangrelay的专栏
11-16 2975
  安装  文件  关于  帮助  博客 参与其中 2018年10月25日公告 World MoveIt！ 结合运动规划，操纵，3D感知，运动学，控制和导航方面的最新进展 海报如下  入门 最新消息：Melodic / Ubuntu 18.04 从DEBIAN安装 版本：0.10.0 从源安装 | 在Github上查看   运动规划 在杂乱的环境中生成...
day03-地图专题课程-运动健康与社交案例
10-29
【地图专题课程】运动健康与社交案例涉及到一系列与地图服务、运动数据管理和社交分享相关的知识点。以下是这些知识点的详细说明： 1. **结束骑行运动**： - 结束骑行是当运动时间超过3分钟时，用户正常结束运动的...
day02-地图专题课程-运动健康与社交案例
10-29
【地图专题课程-运动健康与社交案例】是一个关于利用地图技术在运动健康和社交领域应用的课程资源。课程重点介绍了百度地图的鹰眼轨迹服务，它是一个强大的轨迹管理和监控工具，适用于各种车辆和人员的追踪。 一、...
五年级英语下册Unit1Myday第6课时作业人教PEP版
09-09
这篇内容是关于五年级英语下册Unit1"My day"第六课时的作业，适用于人教PEP版教材。这个单元主要围绕日常生活活动展开，旨在帮助学生学习和掌握与日常生活相关的基本词汇和表达方式。 首先，我们需要关注的是词汇...
2020春五年级英语下册Unit1Myday单元知识梳理人教PEP版20200506233
09-08
这篇资料主要针对五年级英语下册Unit1"My Day"单元的知识点进行了梳理，涵盖了词汇、日常活动、频度副词以及重要句型等方面。以下是详细的内容解析： 一、重点词汇： 1. eat breakfast：吃早餐 2. have...class：上...
【Vue】a-radio-group单选框数字与字符串回显问题
叶为正的博客
10-08 244
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
前端基础面试题·第四篇——Vue（其二）
2301_76380626的博客
10-08 1022
路由跳转 接收参数 params传递参数可以用过页面路由对象route的params属性访问到。 2.query传参 query 传参是通过URL的查询字符串来传递参数，这种方式传递的参数是可选的。 这种方式不需要提前配置路由路径，直接在路由跳转时在路径或者配置中传递参数即可。 路由跳转 接收参数 这种方式传递的参数会挂载到页面路由对象route的query对象上。 2. hash和history路由区别 hash路由地址上在路径后面带#号，history路由地址上不带#号. 在
web扩展
最新发布
x737510的博客
10-10 409
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
前端的全栈混合之路Meteor篇（四）：支持自定义对象序列化的EJSON介绍
分享有趣的、贴近生活的CS知识
10-07 910
在Meteor框架中，EJSON（Extended JSON）是一个扩展了标准JSON的库，旨在支持更多的数据类型。标准JSON仅支持字符串、数字、布尔值、数组和对象等基本数据类型，而EJSON允许开发者在Meteor应用中传输更复杂的数据类型，例如DateBinary数据，甚至是自定义对象，这使得Meteor在客户端和服务器之间传递复杂数据变得更加便捷和高效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值