各位小伙伴們，今天我們來(lái)學(xué)習(xí)一下輪播圖。輪播圖是我們寫(xiě)網(wǎng)頁(yè)當(dāng)中經(jīng)常出現(xiàn)的一個(gè)效果，基本上各個(gè)網(wǎng)站上都會(huì)有這個(gè)效果。那么一提到輪播圖大家腦子里的第一反應(yīng)是不是用js來(lái)實(shí)現(xiàn)呀。
那今天這篇文章呢我們就不按常理出牌，不用js來(lái)寫(xiě)輪播圖，而是利用純css實(shí)現(xiàn)輪播圖，聽(tīng)起來(lái)是不是很厲害的樣子，純css竟然能寫(xiě)出輪播圖的效果，那么到底應(yīng)該怎么寫(xiě)呢？接下來(lái)廢話不多說(shuō)，上代碼。
最后實(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)無(wú)縫銜接，ul里面放的第一張圖和最后一張圖要一致。千萬(wàn)不要寫(xiě)錯(cuò)哦 ，可以看到我的第一個(gè)li里面放的是1.jpg，最后一個(gè)li也是1.jpg。
第二點(diǎn)：帶有類名active的是激活之后的實(shí)心白點(diǎn)。沒(méi)有帶類名的就是默認(rèn)的空心圓?？偣灿?張圖輪播，所有創(chuàng)建了4個(gè)空心圓，當(dāng)播放到第一張圖的時(shí)候就把實(shí)心圓移動(dòng)到第一個(gè)空心圓的位置，依次類推。
## css代碼：
```text
.slide {
/* 寫(xiě)相對(duì)定位是因?yàn)橐粫?huì)輪播圖上的小圓點(diǎn)需要做絕對(duì)定位 */
position: relative;
/* 讓輪播圖在頁(yè)面中居中 */
margin: auto;
/* 寬度和高度就是一張圖的寬和高 */
width: 300px;
height: 200px;
/* 只顯示一張圖，其他超出盒子的圖片先隱藏掉 */
overflow: hidden;
}
ul {
list-style: none;
/* 寬度盡量寫(xiě)大，確保能放下所有的圖片 */
width: 9999px;
/* 控制ul開(kāi)始做位置移動(dòng)（利用css動(dòng)畫(huà)特性來(lái)實(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)滑過(guò)暫停播放 */
.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)畫(huà)讓圖片和白點(diǎn)都動(dòng)起來(lái)（這里是核心代碼）
```text
/* 讓圖片動(dòng)起來(lái)的動(dòng)畫(huà) */
@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)起來(lái)的動(dòng)畫(huà)：
```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)”的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對(duì)零基礎(chǔ)的就業(yè)班，有針對(duì)想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。
京公網(wǎng)安備 11010802030320號(hào)