各位小伙伴們，今天我們來學習一下輪播圖。輪播圖是我們寫網頁當中經常出現的一個效果，基本上各個網站上都會有這個效果。那么一提到輪播圖大家腦子里的第一反應是不是用js來實現呀。

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

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

## html代碼

```text
<!-- 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個空心圓，當播放到第一張圖的時候就把實心圓移動到第一個空心圓的位置，依次類推。

## 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;
            }
        }
```

更多關于“web前端培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓經驗，課程大綱更科學更專業，有針對零基礎的就業班，有針對想提升技術的提升班，高品質課程助理你實現夢想。