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

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

準(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è)圖片沒(méi)有切換效果，一個(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 問(wèn)題

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

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

總結(jié)

以上是生活随笔為你收集整理的android 缩进轮播图,如何利用纯css实现图片轮播的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。