實現(xiàn)思路：

（推薦學(xué)習(xí)：css快速入門）

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

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

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

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

注意事項：

• 動畫效果分為切換和停留兩部分

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

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

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

HTML代碼：

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

代碼解析：

這里創(chuàng)建了三個 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 問題

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

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