案例三--轮播图

一、思路

功能一：无缝轮播

            1、设置轮播图自动移动-注意：设置轮播的时间一定要比运动函数里面的时间长

            2、设置无缝轮播

              2.1再首尾各增加一张轮播图--注意：记得要修改ul的宽度

              2.2设置轮播图移动到首尾后，跳转到对应的轮播图上

功能二：设置左右点击按钮，使轮播图移动

            3、设置左右点击按钮，使轮播图移动

              3.1设置左右导航按钮

              3.2设置点击按钮移动事件

              3.3解决快速点击时出现的空白图片bug:一张图片移动完后才能进行点击，否则点击不生效，是使用未运动(false)或者运动中(true)状态来设置

功能三：指示器随轮播图移动而变换显示位置

            4、设置指示器，轮播图移动，指示器随之变动

              4.1添加指示器

              4.2类似于选项卡功能：清除指示器所有颜色样式，用计数器进行点击计数，计数值当作索引号赋给指示器，对应的指示器显示红色

功能四：点击指示器，轮播图移动

            5、设置点击指示器，轮播图随之移动

              5.1设置指示器点击事件

              5.2点击指示器，轮播图移动---注意：指示器的索引号要重新赋原来的值

 功能五：鼠标点击移动，轮播图移动

            6、移动轮播图--参考拖动效果

              6.1设置鼠标按下事件

              6.2找到当前鼠标按下去的位置---用于判断鼠标移动是向右还是左

              6.3设置鼠标移动事件

              6.4设置鼠标抬起，移动事件停止

//轮播图style样式
<style>
        * {
            padding: 0;
            margin: 0;
        }

        .swiperBox {
            width: 400px;
            height: 200px;
            margin-top: 100px;
            margin-left: 500px;
            position: relative;
        }

        .swiper {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            border: 3px solid red;
        }

        ul {
            display: flex;
            width: 2800px;
            position: absolute;
            left: -400px;
        }

        ul li {
            width: 400px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            list-style: none;

        }

        .swiper>div {
            position: absolute;
            width: 30px;