對(duì)于用 css 實(shí)現(xiàn)一個(gè)輪播圖的緣由，是那時(shí)候剛開始接觸前端，完全還不懂 js。但是有一個(gè)項(xiàng)目(就是一個(gè)用來應(yīng)付面試的作品)需要做一個(gè)輪播的效果，當(dāng)時(shí)第一反應(yīng)就是用 css3 自定義動(dòng)畫?-webkit-animation。做出來的效果自己覺得還可以，唯一的不足就是鼠標(biāo)點(diǎn)擊切換 banner 圖和指定到某個(gè)圖。如果項(xiàng)目中不需要切換變換圖片的需求，用 css3 做，何嘗不是一種辦法。不多說，先上代碼：

?

html 代碼如下：

<div class="test"><a href="#" ><img class="img1" src="1.jpg" ></a><a href="#" ><img class='img2' src="2.jpg" ></a><a href="#" ><img class='img3' src="3.jpg" ></a><a href="#" ><img class='img4' src="4.jpg" ></a> </div>

?

接著 css 代碼：

@keyframes t1{0%{ left: 0; }20%{ left: 0; }25%{ left: -960px; }45%{ left: -960px; }50%{ left: -1920px; }70%{ left: -1920px; }75%{ left: -2880px; }95%{ left: -2880px; }100%{ left: 0; } } @keyframes t2{0%{ left: 960px; }20%{ left: 960px; }25%{ left: 0; }45%{ left: 0; }50%{ left: -960px; }70%{ left: -960px; }75%{ left: -1920px; }95%{ left: -1920px; }100%{ left: 960px; } } @keyframes t3{0%{ left: 1920px; }20%{ left: 1920px; }25%{ left: 960px; }45%{ left: 960px; }50%{ left: 0; }70%{ left: 0; }75%{ left: -960px; }95%{ left: -960px; }100%{ left: 1920px; } } @keyframes t4{0%{ left: 2880px; }20%{ left: 2880px; }25%{ left: 1920px; }45%{ left: 1920px; }50%{ left: 960px; }70%{ left: 960px; }75%{ left: 0; }95%{ left: 0; }100%{ left: 2880px; } }

這里定義了 t1、t2、t3、t4 四個(gè)動(dòng)畫名稱(兼容的寫法：自行在 'keyframes' 前加前綴)，主要是動(dòng)畫里的幀數(shù)的設(shè)置技巧，因?yàn)橹挥?張圖，所以就取每次幀數(shù)增加 25% 的時(shí)候才讓 left 值減去圖片寬度，而在改變 left 值之前的 5%(這個(gè)值根據(jù)情況調(diào)整)處 left 值保持不變，而這個(gè) 5% 表示的就是輪播圖中圖片移動(dòng)的時(shí)間，另外 20% 表示的就是圖片禁止的狀態(tài)。然后把這4個(gè)自定義動(dòng)畫一一放到每一個(gè) img 里，例如：

.test .img1{left: 0;-webkit-animation: t1 linear 12s infinite;-moz-animation: t1 linear 12s infinite;-ms-animation: t1 linear 12s infinite;-o-animation: t1 linear 12s infinite;animation: t1 linear 12s infinite; } .test .img2{left: 960px;-webkit-animation: t2 linear 12s infinite;-moz-animation: t2 linear 12s infinite;-ms-animation: t2 linear 12s infinite;-o-animation: t2 linear 12s infinite;animation: t2 linear 12s infinite; } .test .img3{left: 1920px;-webkit-animation: t3 linear 12s infinite;-moz-animation: t3 linear 12s infinite;-ms-animation: t3 linear 12s infinite;-o-animation: t3 linear 12s infinite;animation: t3 linear 12s infinite; } .test .img4{left: 2880px;-webkit-animation: t4 linear 12s infinite;-moz-animation: t4 linear 12s infinite;-ms-animation: t4 linear 12s infinite;-o-animation: t4 linear 12s infinite;animation: t4 linear 12s infinite; } .test:hover img{-webkit-animation-play-state: paused;-moz-animation-play-state: paused;-ms-animation-play-state: paused;-o-animation-play-state: paused;animation-play-state: paused; }

代碼最后給了一個(gè)鼠標(biāo)移上去，動(dòng)畫停止的效果，整個(gè)輪播的時(shí)間自行設(shè)置，‘infinite’ 表示一直持續(xù)輪播。

ps：這個(gè)是一個(gè)正序的輪播，同理也可以實(shí)現(xiàn)正反序輪播，在定義動(dòng)畫那里改改幀數(shù)設(shè)置就行，有疑問，歡迎在評(píng)論中提出，謝謝大家。

?

轉(zhuǎn)載于:https://www.cnblogs.com/LY-leo/p/5774228.html

總結(jié)

以上是生活随笔為你收集整理的用 CSS 做轮播图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。