css如何實(shí)現(xiàn)輪播圖

這篇文章主要介紹了css如何實(shí)現(xiàn)輪播圖的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇css如何實(shí)現(xiàn)輪播圖文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

具體操作步驟：

1、準(zhǔn)備了3張大小相同的圖片，將圖片的文件名命名為1.png，2.png，3.png。

2、把你想要展示圖片橫排放在一個(gè)圖片容器里面。

3、圖片容器外再加一個(gè)展示容器，圖片大小就是展示容器大小。

具體操作代碼如下：

<div id="container">
<div id="photo">
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
</div>
</div>

4、在圖片容器上添加自定義動(dòng)畫(huà)，在動(dòng)畫(huà)不同階段設(shè)置遞增的偏移值。(圖片處代碼添加 float 效果，所以不用考慮margin 問(wèn)題；代碼中設(shè)置的動(dòng)畫(huà)階段（如：35%~60%）是動(dòng)畫(huà)停留部分，和上一階段空余時(shí)間（如25%~35%）即為動(dòng)畫(huà)切換部分，時(shí)間長(zhǎng)短可以自己試驗(yàn)把控。）

#container {
width: 400px;
height: 300px;
overflow: hidden;
}

#photo {
width: 1200px;
animation: switch 5s ease-out infinite;
}

#photo > img {
float: left;
width: 400px;
height: 300px;
}

@keyframes switch {
0%, 25% {
margin-left: 0;
}
35%, 60% {
margin-left: -400px;
}
70%, 100% {
margin-left: -800px;
}
}

關(guān)于“css如何實(shí)現(xiàn)輪播圖”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“css如何實(shí)現(xiàn)輪播圖”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。