纯CSS实现轮播图

html代码

<!-- slide是轮播图区域 -->
    <div class="slide">
        <!--  swiper里面放的是图片-->
        <ul class="swiper">
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/1.jpg" alt=""></li>
        </ul>
        <!-- 这里是轮播图上的小圆点 -->
        <div class="circle">
            <div class="active"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

第一点：要想实现无缝衔接，ul里面放的第一张图和最后一张图要一致。千万不要写错哦 ，可以看到我的第一个li里面放的是1.jpg，最后一个li也是1.jpg。

第二点：带有类名active的是激活之后的实心白点。没有带类名的就是默认的空心圆。总共有4张图轮播，所有创建了4个空心圆，当播放到第一张图的时候就把实心圆移动到第一个空心圆的位置，依次类推。

  .slide {
            /* 写相对定位是因为一会轮播图上的小圆点需要做绝对定位 */
            position: relative;
            /* 让轮播图在页面中居中 */
            margin: auto;
            /* 宽度和高度就是一张图的宽和高 */
            width: 300px;
            height: 200px;
            /* 只显示一张图，其他超出盒子的图片先隐藏掉 */
            overflow: hidden;
        }

        ul { 
            list-style: none; 
            /* 宽度尽量写大，确保能放下所有的图片 */
            width: 9999px;
            /* 控制ul开始做位置移动（利用css动画特性来实现===核心代码） */
            animation: swiperRun 10s infinite 2s running;
        }

        li {
            width: 300px;
            height: 200px;
            float: left;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .circle {
            width: 100px;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom: 10px;

        }
        .circle div {
            box-sizing: border-box;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid white;
            float: left;
            margin: 0 5px;

        }
        /* 鼠标滑过暂停播放 */
        .slide:hover ul,.slide:hover .active{
            animation-play-state: paused;
            cursor: pointer;
        }
        .circle .active {
            opacity: 1;
            transform: translateX(20px);
            background-color: #FFF;
            animation: circleRun 10s infinite 2s running;
        }

创建动画让图片和白点都动起来（这里是核心代码）

/* 让图片动起来的动画 */
        @keyframes swiperRun {
            /* 第一张 */
            0% {
                transform: translateX(0px);
            }
            /* 第二张 */
            5% {
                transform: translateX(-300px);
            }

            25% {
                transform: translateX(-300px);
            }
            /* 第三张 */
            30% {
                transform: translateX(-600px);
            }

            50% {
                transform: translateX(-600px);
            }
            /* 第四张 */
            55% {
                transform: translateX(-900px);
            }

            75% {
                transform: translateX(-900px);
            }
            /* 第五张 */
            80% {
                transform: translateX(-1200px);
            }

            100% {
                transform: translateX(-1200px);
            }
        }

让白色实心圆点动起来的动画：

@keyframes circleRun {
            /* 第一个点 */
            0% {
                transform: translateX(20px);
                opacity: 1;
            }
            /* 第二个点 */
            5% {
                transform: translateX(40px);
                opacity: 1;
            }
            25% {
                transform: translateX(40px);
                opacity: 1;
            }
            /* 第三个点 */
            30% {
                transform: translateX(60px);
                opacity: 1;
            }
            50% {
                transform: translateX(60px);
                opacity: 1;
            }
            /* 第四个点 */
            55% {
                transform: translateX(80px);
                opacity: 1;
            }

            75% {
                transform: translateX(80px);
                opacity: 1;
            }
            77% {
                transform: translateX(19px);
                opacity: 0;
            }
            /* 第五个点  移出去 */
            80% {
                transform: translateX(20px);
                opacity: 1;
            }
            100% {
                transform: translateX(20px);
                opacity: 1;
            }
        }
       transform: translateX(20px);
                opacity: 1;
            }
            100% {
                transform: translateX(20px);
                opacity: 1;
            }
        }