纯CSS实现轮播图-千锋教育

纯CSS实现轮播图

发布时间:2022-06-02 09:48:00

发布人:wjy

各位小伙伴们，今天我们来学习一下轮播图。轮播图是我们写网页当中经常出现的一个效果，基本上各个网站上都会有这个效果。那么一提到轮播图大家脑子里的第一反应是不是用js来实现呀。

那今天这篇文章呢我们就不按常理出牌，不用js来写轮播图，而是利用纯css实现轮播图，听起来是不是很厉害的样子，纯css竟然能写出轮播图的效果，那么到底应该怎么写呢？接下来废话不多说，上代码。

最后实现的效果：<img src="C:\Users\Administrator\Desktop\未命名项目_media\未命名项目.gif" alt="未命名项目" />

## html代码

```text

    <div class="slide">
        
        <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个空心圆，当播放到第一张图的时候就把实心圆移动到第一个空心圆的位置，依次类推。

## css代码：

```text
       .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;
        }
```

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

```text
/* 让图片动起来的动画 */
        @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);
            }
        }
```

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

```text
@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;
            }
        }
```