JS 运动函数轮播图

最新推荐文章于 2022-11-17 19:51:17 发布

珎珎啊

最新推荐文章于 2022-11-17 19:51:17 发布

阅读量227

点赞数

分类专栏：代码前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_43363773/article/details/105316325

版权

前端同时被 2 个专栏收录

113 篇文章 1 订阅

订阅专栏

代码

34 篇文章 0 订阅

订阅专栏

1. 复制标签的语法

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        // 复制标签的方式
        // clone 方式
        var ul = document.querySelector('ul');

        // 获取标签
        var li1 = document.querySelectorAll('li')[0]
        var li5 = document.querySelectorAll('li')[4]

        // 克隆标签    标签.cloneNode(true)
        var first = li1.cloneNode(true);
        var last = li5.cloneNode(true);

        console.log(first);
        console.log(last);

        // 写入标签

        // 在ul中的最后,写入标签
        ul.appendChild(first);

        // 在第一个标签之前,写入聂荣
        // 标签.insertBefore(要写入的新的内容 , 在哪个标签前写入 )
        ul.insertBefore(last , li1 )

    </script>

2. 监听

<div>123</div>

    <script>
        // var fun2 = function(){
        //     console.log(789);
        // }

        // var oDiv = document.querySelector('div');
        // oDiv.addEventListener('click' , function(){
        //     console.log(123);
        // })

        // 必须是绑定的函数名称,或者存储函数的变量名称
        // oDiv.addEventListener('click' , fun1);

        // oDiv.addEventListener('click' , fun2);

        // function fun1(){
        //     console.log(456);
        // }

        // 移除事件处理函数,也是移除的函数名称/变量名称
        // oDiv.removeEventListener('click' , fun1);

        // 如果函数执行时,有参数,就不能直接赋值函数名称
        // 因为函数执行时是需要赋值实参的


        var oDiv = document.querySelector('div');

        // 没有赋值参数,JavaScript程序,会自动把形参当做是事件对象,存储事件对象数据
        // 只给第一个形参存储,之后的形参没有内容,不执行
        // oDiv.addEventListener('click' , fun1)   

        // 正确的绑定方式
        // 定义一个函数,在这个函数中,调用带有参数函数
        // 给标签绑定的是这个函数,删除的也是这个函数
        oDiv.addEventListener( 'click' , f ); 

        oDiv.removeEventListener( 'click' , f ); 

        // 如果不需要删除,就像昨天写的,可以直接定义在函数中
        
        oDiv.addEventListener( 'click' , function(){
            fun1('张三' , '李四');
        } ); 

        function f(){
            fun1('张三' , '李四')
        }

        function fun1(str1,str2){
            console.log(str1,str2)
        }

3. 监听拖拽

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 5000px;
        }

        .box {
            width: 800px;
            height: 800px;
            border: 10px solid #000;
            margin: 40px auto;
            position: relative;
            background: skyblue;
        }

        .inner {
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="inner"></div>
    </div>

    <script>

        // 1,获取标签对象
        var oBox = document.querySelector('.box');
        var oInner = document.querySelector('.inner');

        // 2,获取相应的数据
 
        // 获取父级标签的---占位---不包括边框线
        var oBoxWidth = oBox.clientWidth;
        var oBoxHeight = oBox.clientHeight;

        // 获取子级标签的---占位---包括边框线
        var oInnerWidth = oInner.offsetWidth;
        var oInnerHeight = oInner.offsetHeight;

        // 给父级标签添加事件

        // 事件监听语法

        oInner.addEventListener('mousedown' , function(){
            // 直接 move函数 , 不需要实参的 
            document.addEventListener('mousemove' , move );
        })

        document.addEventListener('mouseup' , function(){
            // 鼠标抬起,删除移动事件,绑定的 move 函数
            document.removeEventListener('mousemove' , move );
        })
        // 总结:
        // 按下执行,给 鼠标移动事件 绑定 move 函数
        // 抬起执行,给 鼠标移动事件 删除 move 函数

        // 这里的形参e 是 事件对象
        // 事件对象在触发事件时,JavaScript程序会自动向这个形参存储实参
        // 调用触发事件时,不要需要写实参
        function move(e){
           		var x = e.pageX - oBox.offsetLeft - oBox.clientLeft - oInnerWidth / 2;
                var y = e.pageY - oBox.offsetTop - oBox.clientTop - oInnerHeight / 2;
                if (x < 0) {
                    x = 0;
                }
 
                if (y < 0) {
                    y = 0;
                }
                if (x > oBoxWidth - oInnerWidth) {
                    x = oBoxWidth - oInnerWidth;
                }

                if (y > oBoxHeight - oInnerHeight) {
                    y = oBoxHeight - oInnerHeight
                }
                oInner.style.left = x + 'px';
                oInner.style.top = y + 'px';
        }
	</script>

思路步骤和问题

事件,到底是绑定给父级,子级,还是document,还是window
事件,取消,到底是通过谁取消
没有固定的写法,看你需要的效果
还是document和window效果相同,没有区别

鼠标按下
oInner.onmousedown 鼠标在粉色div上,按下鼠标,并且移动鼠标,才会有效果
oBox.onmousedown 鼠标在蓝色div上,按下鼠标,并且移动鼠标,才会有效果
window.onmousedown 鼠标在全屏上,按下鼠标,并且移动鼠标,都会有效果

鼠标移动
最好写成 document.onmousemove / window.onmousemove
鼠标可以快速移动,不怕移出粉色div

鼠标抬起
oInner.onmouseup 鼠标在粉色div上抬起,才会执行,标签不跟随移动
oBox.onmouseup 鼠标在蓝色div上抬起,才会执行,标签不跟随移动
window.onmouseup 鼠标在整个页面上抬起,都会执行,标签不跟随移动
闪烁问题
原因: 相对于标签内容的左上角的定位
会因为鼠标经过不同的标签对象,获取不同的数据
而且JavaScript执行时,有时还会有bug产生
offsetX offsetY 我们是不推荐使用的
解决: 使用 pageX 和 pageY
定位: page距离 - 父级标签外边距 - 父级border - 移动标签占位/2(标签中心点和鼠标重合)
极值1: 左上都是 0
极值2: 右下父级标签占位(不算border) - 移动标签占位(计算border)

4. 运动函数1

<style>
        *{
            margin: 0;
            padding: 0;
        }

        div,p,h1{
            width: 100px;
            height: 100px;
            background: pink;
            position: fixed;
            top:100px;
            left: 0;
        }

        p{
            background: blue;
            top:200px;
        }

        h1{
            background: pink;
            top:300px;
        }
    </style>
</head>
<body>
    <button>点击控制div</button>
    <button>点击控制p</button>
    <button>点击控制h1</button>
   
    <div>div</div>
    <p>p标签</p>
    <h1>h1</h1>

    <script>
        var oDiv = document.querySelector('div');
        var oP = document.querySelector('p');
        var oH1 = document.querySelector('h1');

        var oBtn1 = document.querySelectorAll('button')[0];
        var oBtn2 = document.querySelectorAll('button')[1];
        var oBtn3 = document.querySelectorAll('button')[2];

        oBtn1.addEventListener('click' , function(){
            move(oDiv,400 , 'left');
        })

        oBtn2.addEventListener('click' , function(){
            move(oP,300 , 'top');
        })

        oBtn3.addEventListener('click' , function(){
            move(oH1, 500 , 'left');
        })

        // 为了方便多次执行运动程序效果,将程序封装为函数
        // 每次调用函授,操作的标签对象,可能是不同的标签对象
        // 此时需要一个参数,来告诉函数,操作的标签对象谁

        // 参数1:需要操作的,运动的标签对象
        // 参数2:目标位置
        // 参数3:运动方式

        // 问题是: 1,参数的顺序,不可控制
        //        2,参数的个数,不可控制
        // 将参数2和参数3,写成对象的形式
        // 也就是将 运动方式 和 目标位置 写成 对象的 属性:属性值 形式

        function move(ele , target , type ){
            var speed = 0;
            var time = setInterval( function(){
                speed += 20;
                // 对象,调用变量,必须是[]语法来解析变量
                ele.style[type] = speed + 'px';
                if(speed == target){
                    clearInterval(time);
                }
            } , 100)
        }

5. 运动函数2

<style>
        *{
            margin: 0;
            padding: 0;
        }

        div,p,h1{
            width: 100px;
            height: 100px;
            background: pink;
            position: fixed;
            top:100px;
            left: 100px;
        }

        p{
            background: blue;
            top:200px;
            left:200px;
        }

        h1{
            background: pink;
            top:300px;
            left:300px;
        }
    </style>
</head>
<body>
    <button>点击控制div</button>
    <button>点击控制p</button>
    <button>点击控制h1</button>
   
    <div>div</div>
    <p>p标签</p>
    <h1>h1</h1>

    <script>
        var oDiv = document.querySelector('div');
        var oP = document.querySelector('p');
        var oH1 = document.querySelector('h1');

        var oBtn1 = document.querySelectorAll('button')[0];
        var oBtn2 = document.querySelectorAll('button')[1];
        var oBtn3 = document.querySelectorAll('button')[2];

        oBtn1.addEventListener('click' , function(){
            move(oDiv, {left:600} );
        })

        oBtn2.addEventListener('click' , function(){
            move(oP, {top:600});
        })

        oBtn3.addEventListener('click' , function(){
            move(oH1, {left:600} );
        })

        // 参数1:执行运动的标签对象
        // 参数2:执行运动的方式和目标位置,对象的形式

        function move(ele , obj ){
            // 获取对象中的属性和属性值,必须使用for...in来循环
            // 语法 for(var 变量 in 对象){程序}
            // 自定义变量中,存储的是对象的属性  对象[自定义变量]获取的就是属性值

            // type就是 top left 属性  obj[type] 就是 500 600 属性值
            for(var type in obj){
                // 运动属性,对应的初始值
                // 参数中的运动属性是谁,是top,还是left
                // 也就是 type 中 存储是什么运动属性
                // 我们就获取哪个运动属性的初始值
                // 获取的方式,是通过获取标签css样式属性的属性值
                // 应该是写成兼容的方式,暂时直接获取
                // 语法 : window.getComputedStyle(标签对象).属性
                // 1,标签对象,现在是形参ele,执行时赋值实参 oDiv,oP,oH1....
                // 2, 属性,是存储在 type 形参变量中 的数据
                //    必须使用[]语法,解析type变量
                // window.getComputedStyle(ele)[type]

                // 标签对象.style  只能获取行内样式
                // window.getComputedStyle  获取的是最终执行的样式,不区分行内,内部,外部
                //                          只要是执行的,就能拿到手
                // 执行结果有 px 单位 是 字符串形式 100px  200px ...
                // 需要获取数值部分,也就是整数部分 parseInt() 来获取

                var oldVal = parseInt(window.getComputedStyle(ele)[type]) ;
                var time = setInterval( function(){
                    // 在原始数据的基础上,来执行运动
                    oldVal += 20;
                    // 对象,调用变量,必须是[]语法来解析变量
                    ele.style[type] = oldVal + 'px';
                    if( oldVal == obj[type] ){
                        clearInterval(time);
                    }
                } , 100)
            }
        }

6. 运动函数3

<style>
        *{
            margin: 0;
            padding: 0;
        }

        div,p,h1{
            width: 100px;
            height: 100px;
            background: pink;
            position: fixed;
            top:100px;
            left: 100px;
        }

        p{
            background: blue;
            top:200px;
            left:200px;
        }

        h1{
            background: pink;
            top:300px;
            left:300px;
        }
    </style>
</head>
<body>
    <button>点击控制div</button>
    <button>点击控制p</button>
    <button>点击控制h1</button>
   
    <div>div</div>
    <p>p标签</p>
    <h1>h1</h1>

    <script>
        // 解决的问题:
        // 之前都是正向移动,现在要解决的是反向移动

        var oDiv = document.querySelector('div');
        var oP = document.querySelector('p');
        var oH1 = document.querySelector('h1');

        var oBtn1 = document.querySelectorAll('button')[0];
        var oBtn2 = document.querySelectorAll('button')[1];
        var oBtn3 = document.querySelectorAll('button')[2];

        oBtn1.addEventListener('click' , function(){
            move(oDiv, {left:205} );
        })

        oBtn2.addEventListener('click' , function(){
            move(oP, {top:9});
        })

        oBtn3.addEventListener('click' , function(){
            move(oH1, {left:7} );
        })

        // 参数1:执行运动的标签对象
        // 参数2:执行运动的方式和目标位置,对象的形式

        function move(ele , obj ){

            for(var type in obj){
                // 获取原始位置
                var oldVal = parseInt(window.getComputedStyle(ele)[type]) ;
                // 定时器
                var time = setInterval( function(){
                    // 计算需要改变的数值,是多少
                    // 目标位置 - 初始位置
                    // 向右向下移动,就是正数,向左向上移动就是负数
                    // 设定分几次完成改变数值,也就是定义每次改变的数值数值
                    // 根据 终止位置,起始位置,和执行次数,计算出每次需要改变的数值
                    var val = ( obj[type] - oldVal )  / 5 ;
                    
                    // 如果执行结果是小数,需要做取整操作
                    // 通过三元运算符,给val变量进行赋值
                    // 当 val > 0 时  执行的是  Math.ceil(val)  向上取整
                    // 当 val <= 0 时 执行的是  Math.floor(val) 向下取整

                    // 正数,当数值 0.几 时 向上取整 变的数值 是 1
                    // 负数,当数值 -0.几 时 向下取整 变的数值 是 -1
                    //      确保每次改变的数值,最小是1
                    //      确定可以到达 目标位置,可以清除定时器
                    val = val > 0 ? Math.ceil(val) : Math.floor(val) ;
                    console.log(val)
                    // 每次改变的是计算出来的数值
                    oldVal += val;
                    // console.log(oldVal);
                    ele.style[type] = oldVal + 'px';
                    if( oldVal == obj[type] ){
                        clearInterval(time);
                    }
                } , 100)
            }

        }

7. 运动函数4

<style>
        *{
            margin: 0;
            padding: 0;
        }

        div,p,h1{
            width: 100px;
            height: 100px;
            background: pink;
            position: fixed;
            top:100px;
            left: 100px;
        }

        p{
            background: blue;
            top:200px;
            left:200px;
        }

        h1{
            background: pink;
            top:300px;
            left:300px;
        }
    </style>
</head>
<body>
    <button>点击控制div</button>
    <button>点击控制p</button>
    <button>点击控制h1</button>
   
    <div>div</div>
    <p>p标签</p>
    <h1>h1</h1>

    <script>
        // 解决的问题:
        // 之前都是正向移动,现在要解决的是反向移动

        var oDiv = document.querySelector('div');
        var oP = document.querySelector('p');
        var oH1 = document.querySelector('h1');

        var oBtn1 = document.querySelectorAll('button')[0];
        var oBtn2 = document.querySelectorAll('button')[1];
        var oBtn3 = document.querySelectorAll('button')[2];

        oBtn1.addEventListener('click' , function(){
            // 参数3,直接赋值函数
            move(oDiv, {left:205} , function(){console.log('div停止了')} );
        })

        oBtn2.addEventListener('click' , function(){
            // 参数3,直接赋值函数名称
            move(oP, {top:9} , fff );
        })

        oBtn3.addEventListener('click' , function(){
            move(oH1, {left:7} );
        })

        // 参数1:执行运动的标签对象
        // 参数2:执行运动的方式和目标位置,对象的形式

        // 新增参数3:当运动停止时,执行的函数
        // 这里的 callback 是形参
        // 赋值的 实参,是函数的名称,或者变量名称,存储的都是函数的内存地址
        // 必须要 通过() 来调用 赋值的函数 callback()

        function move(ele , obj , callback ){

            for(var type in obj){
                // 获取原始位置
                var oldVal = parseInt(window.getComputedStyle(ele)[type]) ;
                // 定时器
                var time = setInterval( function(){
                    // 获取需要改变数值,并且计算步长
                    var val = ( obj[type] - oldVal )  / 5 ;
                    // 取整,如果是正数,向上取整,如果是负数,向下取整
                    // 确保,最后每次改变的最小值是1
                    val = val > 0 ? Math.ceil(val) : Math.floor(val) ;
                    // 每次改变的是计算出来的数值
                    oldVal += val;
                    // 将改变后的数值,作为属性值,赋值给css样式,实现位置的改变
                    ele.style[type] = oldVal + 'px';
                    // 判断,如果当前位置,也就是改变后,数值是目标位置
                    if( oldVal == obj[type] ){
                        // 清除定时器,终止定时器的执行,运动停止
                        clearInterval(time);
                        // 当清除了定时器,也就是运动终止了
                        // 来调用参数3赋值的函数
                        callback();
                    }
                } , 100)
            }
        }

        function fff(){
            console.log('不管你是谁,反正你的运动停止了');
        }

    </script>

8. 函数的特别说明

 <script>
        // 当参数是一个函数时,特别的执行方式和赋值方式

        // 参数是一个字符串,或者是其他 基本数据类型
        // 直接赋值,直接调用就可以了
        function fun1(str){
            console.log(str);
        }
        fun1('张三');

        // 参数是一个函数
        // 输入的参数,就有两种情况
        // 1,实参直接是另一个函数
        // 2,参数是一个函数名称
        function fun2(f){
            // 如果实参是一个函数,形参 f 中 存储的就是这个函数的地址
            // 在fun2内,要调用函数,必须要添加() 来调用执行函数
            f() ; 
        }
        fun2( function (){console.log(123)} );

        fun2( fun3 ); 
        function fun3(){
            console.log(456)
        } 
    </script>

9. 运动函数终极版

<style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background: pink;
            position: fixed;
            top: 100px;
            left: 100px;
            opacity: 1;
        }
    </style>
</head>

<body>
    <button>点击</button>
    <div></div>

    <script>
        var oDiv = document.querySelector('div');
        var oBtn = document.querySelector('button');

        // left,top,opacity,宽,高 都改变
        oBtn.addEventListener('click', function () {
            move(oDiv, { left: 600, top: 600 , width:200 , height:400 , opacity:0}, function(){
                console.log('运动结束了');
            })
        });
        // 说明:
        // 第一,需要使用ES6语法中的 let 声明变量
        // 第二,如果是透明度,因为是小数,需要单独处理
        // 第三,建立对象,存储定时器
        // 第四,清除定时器器,同时删除对象中的单元
        // 第五,判断对象,如果是一个空对象,证明所有运动都停止了

        function move(ele, obj, callback) {
            let time = {};
            for (let type in obj) {
                let oldVal = 0;
                if (type === 'opacity') {
                    oldVal = parseFloat(window.getComputedStyle(ele)[type]) * 100;
                } else {
                    oldVal = parseInt(window.getComputedStyle(ele)[type]);
                }
                time[type] = setInterval(function () {
                    let val = (obj[type] - oldVal) / 10;
                    val = val > 0 ? Math.ceil(val) : Math.floor(val);
                    oldVal += val;
                    if (type === 'opacity') {
                        ele.style[type] = oldVal / 100;
                    } else {
                        ele.style[type] = oldVal + 'px';
                    }
                    if (oldVal == obj[type]) {
                        clearInterval(time[type]);
                        delete (time[type]);
                    }

                    if (Object.keys(time) == 0) {
                        callback();
                    }
                }, 100)

            }
        } 
    </script>

10. 防止点击过快

 <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 100px;
            height: 100px;
            background: pink;
            position: fixed;
            top:100px;
            left: 100px;
        }

    </style>
    <!-- 在head标签中,加载外部的js文件,使用其中的程序 -->
    <!-- <script src="./move.js"></script> -->
</head>
<body>
    <button>点击</button>
    <div></div>

    <!-- 在body中,调用外部js文件,只要写在调用函数之前就可以 -->
    <script src="./move.js"></script>

    <script>
        // 阻止点击过快的思路
        // 方法1:禁用
        //   点击时,禁用button
        //   这样的方法,只对button按钮有用
        //   div,span等标签是没有作用的

        // 方法2:判断+return
        //   第一次点击执行 move()函数
        //   之后再点击,执行的是return,终止执行move()函数
        //   当运动终止之后,可以再次点击

        var oDiv = document.querySelector('div');
        var oBtn = document.querySelector('button');

        /*
            // 方法1,禁用方法
        
        
        oBtn.addEventListener('click' , function(){
            // 点击时,给button按钮添加引用属性
            // 当运动停止时,也就是旧的定时器已经清除了
            // 可以再次执行了
            // 参数3,是运动停止后,也就是清除了定时器之后,执行的程序
            //       在参数3的函数中,让 button按钮 , disabled 为 false 
            oBtn.disabled = true;
            // 代用move函数
            move(oDiv , {left:600} , function(){
                oBtn.disabled = false;
                console.log('运动停止了');
            })
        })

        */

        // 定义一个变量,类似于质数判断中的开关变量
        // 赋值原始值
        var bool = true;

        oBtn.addEventListener('click' , function(){
            // 方法1  变量是 原始值true,执行程序
            // if(bool === true){   
            //     // 就执行move()
            //     move(oDiv,{left:600},function(){
            //         // 当运行结束时,给bool,在赋值为true,可以再次点击
            //         bool = true;
            //     });
            //     // 写哪儿无所谓,只要是执行,就给变量赋值其他数值
            //     bool = '其他数值';
            // }

            // 方式2  变量不是原始值true, 执行return,终止之后的函数程序执行
            if(bool !== true){
                // 如果变量中不是原始值,就直接执行return,不再执行之后的程序
                return;
            }
            move(oDiv,{left:600},function(){
                // 当运行结束时,给bool,在赋值为true,可以再次点击
                bool = true;
            });
            bool = '随便写什么';
        }) 
    </script>

11. 轮播图HTML

<style> 
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol,li{
            list-style: none;
        }
        a,a:hover,a:active{
            text-decoration: none;
            color: #333;
        }
        .clear::after{
            content: "";
            display: block;
            clear: both;
        }

        .banner{
            width: 600px;
            height: 400px;
            border: 3px solid #000;
            margin: 40px auto;
            position: relative;
            /* overflow: hidden; */
        }

        .banner ul{
            width: 500%;
            height: 100%;
            position: absolute;
            top:0;
            left: 0;
        }

        .banner ul li{
            width: 600px;
            height: 100%;
            float: left;
            display:flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 100px;
        }

        .banner ol{
            height: 50px;
            background: rgba(0, 0, 0, .4);
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            display:flex;
            justify-content: space-evenly;
            align-items: center;
            border-radius: 10px;
        }

        .banner ol li{
            width: 25px;
            height: 25px;
            border-radius:50% ;
            background: #fff;
            margin: 0 25px;
            cursor: pointer;
        }

        .banner ol li.active{
            background: red;
        }

        .banner div{
            width: 100%;
            height: 50px;
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .banner div a{
            width: 40px;
            line-height: 40px;
            font-size: 40px;
            font-weight: 900;
            color: #fff;
            background: rgba(0,0,0,.4);
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="banner">
        <!-- 需要轮序播放的图片,没有多的5和1 
             多出来的5和1是动态生成的
        -->
        <ul>
            <li style="background:pink ;">img1</li>
            <li style="background:gray ;">img2</li>
            <li style="background:blue ;">img3</li>
            <li style="background:skyblue;">img4</li>
            <li style="background:orange ;">img5</li>
        </ul>
        <!-- 与轮播图,对应的焦点按钮 -->
        <ol>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <div>
            <a href="JavaScript:;"> &lt; </a>
            <a href="JavaScript:;"> &gt; </a>
        </div>

    </div>

12. 轮播图之设置焦点

<style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        a,
        a:hover,
        a:active {
            text-decoration: none;
            color: #333;
        }

        .clear::after {
            content: "";
            display: block;
            clear: both;
        }

        .banner {
            width: 600px;
            height: 400px;
            border: 3px solid #000;
            margin: 40px auto;
            position: relative;
            /* overflow: hidden; */
        }

        .banner ul {
            width: 500%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .banner ul li {
            width: 600px;
            height: 100%;
            float: left;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 100px;
        }

        .banner ol {
            height: 50px;
            background: rgba(0, 0, 0, .4);
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            border-radius: 10px;
        }

        .banner ol li {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #fff;
            margin: 0 25px;
            cursor: pointer;
        }

        .banner ol li.active {
            background: red;
        }

        .banner div {
            width: 100%;
            height: 50px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .banner div a {
            width: 40px;
            line-height: 40px;
            font-size: 40px;
            font-weight: 900;
            color: #fff;
            background: rgba(0, 0, 0, .4);
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="banner">
        <!-- 需要轮序播放的图片,没有多的5和1 
             多出来的5和1是动态生成的
        -->
        <ul class="clear">
            <li style="background:pink ;">img1</li>
            <li style="background:gray ;">img2</li>
            <li style="background:blue ;">img3</li>
            <li style="background:skyblue;">img4</li>
            <li style="background:orange ;">img5</li>
        </ul>
        <!-- 与轮播图,对应的焦点按钮 
             是根据轮播图的图片数量,动态生成的
        -->
        <ol></ol>
        <div>
            <a href="JavaScript:;"> &lt; </a>
            <a href="JavaScript:;"> &gt; </a>
        </div>

    </div>
    <script src="./move.js"></script>
    <script src="./banner.js"></script>
    <script>
        // 获取标签对象
        var oDiv = document.querySelector('.banner');
        var oUl = document.querySelector('ul');
        var oOl = document.querySelector('ol');
        var oUllis = document.querySelectorAll('ul li');
        // li标签的原始宽度,没有padding等,可以直接使用width的属性
        // 如果有有padding,甚至border,要使用对应的方法
        var liWidth = parseInt(window.getComputedStyle(oUllis[0]).width);
        // 定义一个变量,记录伦布图切换的数值
        // 因为已经切换了复制出来的,第一张图片(实际是第5个),
        // index值是从1开始的
        var index = 1;
        // 存储定时器的全局函数,方便在其他函数中调用
        var itme = 0;

        // 1,调用函数,生成li标签
        setLi();

        // 2,复制第一个轮播图内容,和最后一个轮播图内容
        copyLi();

        // 3,轮播图,自动播放函数 
        autoLoop();

        // 4,鼠标移入停止,鼠标移出继续函数
        // stopLoop();