1.圖片輪播（使用動畫，根據圖片不同時間的移動值來實現，圖片排放在一個容器中，圖片大小要與容器大小一致）

#photo>img{float:left;width:330px;height:470px;}#photo{width:1650px;animation:switch 7s ease-out infinite;}<div id="container"><div id="photo"><img src="images/dushu2.jpg"><img src="images/dushu3.jpg"><img src="images/book (4).jpg"><img src="images/book (5).jpg"><img src="images/dushu (6).jpg"></div></div>

上述每個圖片寬度為330px；
img第一外層的photo為圖片容器，即在此盒子中放了5張圖片；圖片中有添加 float的效果，這樣就不用考慮去邊距問題。

#container{width:990px;height:450px;overflow: hidden; }

img第二外層的container為所展示圖片的容器，上述所展示為3張，剩余兩張圖片溢出使用overflow:hidden來將其隱藏起來

#photo{width:1650px;animation:switch 7s ease-out infinite;} @keyframes switch{0%,25%{margin-left: 0;}35%,65%{margin-left:-330px;}75%,100%{margin-left: -660px;}}

上述為使所展示的容器中均有3張圖片，一共5張圖片，第一階段展現出來的即為前三張；第二階段第一張圖片左一一個寬度展現出來的為第2，3，4張圖片；第三階段移動2個圖片的寬度展現出來后3張圖片。
該動畫一個周期為7s,且以慢速 無限循環；
35%~65%為圖片停留階段，和第一階段空出來的時間為動畫切換的部分；
2.圖片漸變輪播（實現前面圖片消失時后一個隱隱出現的效果）

<div id="RotationPicture"><div id="screen"><a href="#"target="_blank"><img src="images/QQ圖片.jpg" width=100%；height=100%;></a><a href="#"target="_blank"><img src="images/two.jpg" width=100%；height=100%;></a><a href="#"target="_blank"><img src="images/four.png" width=100%；height=100%;></a><a href="#"target="_blank"><img src="images/three.png" width=100%；height=100%;></a></div></div>

先創建輪播圖片的div,id為RotationPicture，在創建一個放入圖片的div，id為screen,其中放了4張圖片鏈接。
將圖片設為寬度和高度都設置成100%，可以使整個圖片顯示出來；自由縮放圖片且圖片放大的尺寸不大于其原始值可以將其設置為max-weight:100%;height:auto;;背景圖片可以使其為background-size:100%;使整個背景圖片完全放入div中。

#RotationPicture{height:50px; } #screen a{position:absolute;animation: donghua 12s Infinite; } @keyframes donghua{0%{opacity: 0;}3%{opacity:1;}25%{opacity: 1;}28%{opacity: 0;} } #screen a:nth-child(1){animation-delay:0s} #screen a:nth-child(2){animation-delay:3s} #screen a:nth-child(3){animation-delay:6s} #screen a:nth-child(4){animation-delay:9s}

先要設置容器的大小位置；動畫周期為12s,無限循環；animation-delay為動畫延遲時間，即第二張圖片于整個階段第3s開始播放，第3張圖片于第6s開始播放；0%-3%中有3%的過渡時間（12s的3%），從剛剛開始的完全透明逐漸過渡到完全不透明，25%-28%再由完全不透明逐漸過渡到完全透明，實現前一張圖片消失，同時后一張圖片出現的效果。

總結

以上是生活随笔為你收集整理的图片轮播的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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