輪播圖，網頁上經常能看得見，畫面比較精美，下面是純CSS3的輪播圖的一種

下面是style部分：

這幾行都能明白吧

*{margin:0;padding:0;}

a{text-decoration:none}

li{list-style:none;}

設計寬度不要超過輪播圖片的總寬度再加不到第一張1張圖片的寬度(加第一張1張圖片的寬度是為了輪播效果看得見)我的是1500寬度和200的高度，再設置溢出隱藏(消除移動出顯示區域還在顯示)

#box{width:1500px;height:200px;margin:0 auto;overflow:hidden;}

1000%是比較懶的寫法，為了把ul的寬度設置的寬一點，看著很夸張，因為至少需要超過總圖片的寬度兩倍再加不到1張圖片的寬度為什么要兩倍呢，因為圖片是向左移動的(方向自行設置)，移出去了后面沒有圖片補充就沒有輪播效果

了，1000%夠長了，就不用了去計算總圖片的寬度了，當然，圖片夠多也可以不這么設置，只要設置總寬度寬度的一半在加上不到一張圖片的寬度。輪播的動畫的名字，多少時間輪播一次

#box ul{height:200px;width:1000%;animation:animal 4s linear infinite;}

設置浮動讓所有圖片一行顯示和圖片的寬度

#box ul li{float:left;width:133px;height:200px;}

設置鼠標滑過暫停

#box:hover ul{animation-play-state:paused;}

設置動畫的動畫名和輪播圖移動方向(動畫效果)

@keyframes animal {

0%{margin-left:0;}

100%{margin-left:-1463px;}

}

下面是body部分

輪播圖一般都可以點擊訪問，所以放在a標簽內

實現輪播圖的的方法不止一種。下次小編再給大家分享！

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html图片轮播怎么做的,CSS3制作轮播图的一种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。