各位小伙伴們，今天我們來學(xué)習(xí)一下輪播圖。輪播圖是我們寫網(wǎng)頁當(dāng)中經(jīng)常出現(xiàn)的一個(gè)效果，基本上各個(gè)網(wǎng)站上都會(huì)有這個(gè)效果。那么一提到輪播圖大家腦子里的第一反應(yīng)是不是用js來實(shí)現(xiàn)呀。

 那今天這篇文章呢我們就不按常理出牌，不用js來寫輪播圖，而是利用純css實(shí)現(xiàn)輪播圖，聽起來是不是很厲害的樣子，純css竟然能寫出輪播圖的效果，那么到底應(yīng)該怎么寫呢？接下來廢話不多說，上代碼。

最后實(shí)現(xiàn)的效果：<img src="C:\Users\Administrator\Desktop\未命名項(xiàng)目_media\未命名項(xiàng)目.gif" alt="未命名項(xiàng)目"  />

## html代碼

```text
<!-- slide是輪播圖區(qū)域 -->
    <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>
        <!-- 這里是輪播圖上的小圓點(diǎn) -->
        <div class="circle">
            <div class="active"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
```

注意點(diǎn)：

第一點(diǎn)：要想實(shí)現(xiàn)無縫銜接，ul里面放的第一張圖和最后一張圖要一致。千萬不要寫錯(cuò)哦 ，可以看到我的第一個(gè)li里面放的是1.jpg，最后一個(gè)li也是1.jpg。

第二點(diǎn)：帶有類名active的是激活之后的實(shí)心白點(diǎn)。沒有帶類名的就是默認(rèn)的空心圓?？偣灿?張圖輪播，所有創(chuàng)建了4個(gè)空心圓，當(dāng)播放到第一張圖的時(shí)候就把實(shí)心圓移動(dòng)到第一個(gè)空心圓的位置，依次類推。

## css代碼：

```text
       .slide {
            /* 寫相對(duì)定位是因?yàn)橐粫?huì)輪播圖上的小圓點(diǎn)需要做絕對(duì)定位 */
            position: relative;
            /* 讓輪播圖在頁面中居中 */
            margin: auto;
            /* 寬度和高度就是一張圖的寬和高 */
            width: 300px;
            height: 200px;
            /* 只顯示一張圖，其他超出盒子的圖片先隱藏掉 */
            overflow: hidden;
        }

        ul {
            list-style: none;
            /* 寬度盡量寫大，確保能放下所有的圖片 */
            width: 9999px;
            /* 控制ul開始做位置移動(dòng)（利用css動(dòng)畫特性來實(shí)現(xiàn)===核心代碼） */
            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;

        }
        /* 鼠標(biāo)滑過暫停播放 */
        .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;
        }
```

## 創(chuàng)建動(dòng)畫讓圖片和白點(diǎn)都動(dòng)起來（這里是核心代碼）

```text
/* 讓圖片動(dòng)起來的動(dòng)畫 */
        @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);
            }
        }
```

讓白色實(shí)心圓點(diǎn)動(dòng)起來的動(dòng)畫：

```text
@keyframes circleRun {
            /* 第一個(gè)點(diǎn) */
            0% {
                transform: translateX(20px);
                opacity: 1;
            }
            /* 第二個(gè)點(diǎn) */
            5% {
                transform: translateX(40px);
                opacity: 1;
            }
            25% {
                transform: translateX(40px);
                opacity: 1;
            }
            /* 第三個(gè)點(diǎn) */
            30% {
                transform: translateX(60px);
                opacity: 1;
            }
            50% {
                transform: translateX(60px);
                opacity: 1;
            }
            /* 第四個(gè)點(diǎn) */
            55% {
                transform: translateX(80px);
                opacity: 1;
            }

            75% {
                transform: translateX(80px);
                opacity: 1;
            }
            77% {
                transform: translateX(19px);
                opacity: 0;
            }
            /* 第五個(gè)點(diǎn)  移出去 */
            80% {
                transform: translateX(20px);
                opacity: 1;
            }
            100% {
                transform: translateX(20px);
                opacity: 1;
            }
        }
```

更多關(guān)于“web前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對(duì)零基礎(chǔ)的就業(yè)班，有針對(duì)想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。