實現想法：
（推薦學習：css快速入門）
準備相同大小的多個圖片
將要展示圖片橫排放在一個圖片容器裡面
在圖片容器外再加一個展示容器，展示容器大小為圖片大小
為圖片容器新增自訂動畫，在動畫不同階段設定遞增的偏移值
HTML程式碼：
<div id="container">
<div id="photo">
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
</div>
</div>#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;
}
}以上是如何利用純css實現圖片輪播的詳細內容。更多資訊請關注PHP中文網其他相關文章！
