純css如何實(shí)現(xiàn)圖片輪播？針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)與策劃設(shè)計(jì),衛(wèi)輝網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:衛(wèi)輝等地區(qū)。衛(wèi)輝做網(wǎng)站價(jià)格咨詢:13518219792

實(shí)現(xiàn)思路：

• 準(zhǔn)備相同大小的多個(gè)圖片

• 將要展示圖片橫排放在一個(gè)圖片容器里面

• 在圖片容器外再加一個(gè)展示容器，展示容器大小為圖片大小

• 給圖片容器添加自定義動(dòng)畫，在動(dòng)畫不同階段設(shè)置遞增的偏移值

注意事項(xiàng)：

• 動(dòng)畫效果分為切換和停留兩部分

• 自定義動(dòng)畫階段與圖片數(shù)量相關(guān)

• 動(dòng)畫各階段偏移值與圖片大小相關(guān)

• 本文中示例最后一個(gè)圖片到第一個(gè)圖片沒有切換效果，一個(gè)思路是可以由最后一個(gè)圖片再挨個(gè)切換到第一個(gè)圖片

HTML代碼：

代碼解析：

這里創(chuàng)建了三個(gè) img 元素，img 元素外面是圖片容器，圖片容器外面是展示容器。

css代碼：

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

代碼解析：

• 展示容器大小和圖片大小一致

• 圖片添加 float 效果，不用考慮麻煩的 margin 問題

• 由于示例只有三個(gè)圖片，所以添加了三個(gè)動(dòng)畫階段，每一階段都是通過設(shè)置遞增的 margin-left 值達(dá)到切換的效果

• 設(shè)置的動(dòng)畫階段（如：35%~60%）是動(dòng)畫停留部分，和上一階段空余時(shí)間（如25%~35%）即為動(dòng)畫切換部分，各部分時(shí)間長短需要自己把控

關(guān)于純css如何實(shí)現(xiàn)圖片輪播問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。