css實現(xiàn)圖片輪播的方法：首先將要展示圖片橫排放在一個圖片容器里面；然后在圖片容器外再加一個展示容器，展示容器大小為圖片大??；最后給圖片容器添加自定義動畫，在動畫不同階段設(shè)置遞增的偏移值。

本教程操作環(huán)境：windows7系統(tǒng)、css3版，DELL G3電腦。

css實現(xiàn)圖片輪播的方法：

css讓圖片輪播實現(xiàn)思想：

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

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

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

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

示例：

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 元素外面是圖片容器，圖片容器外面是展示容器。

相關(guān)教程推薦：CSS視頻教程