利用CSS如何實現圖片輪播效果？ （程式碼範例）

本篇文章為大家介紹CSS實現圖片輪播效果的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

【推薦教學：CSS影片教學】

理論基礎

CSS3 animation 屬性和@keyframes 規則

主體思想

• #準備相同大小的多個圖片

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

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

• 為圖片容器新增自訂動畫，在動畫不同階段設定遞增的偏移值

• #注意事項

# #動畫效果分為切換與停留兩部分

自訂動畫階段與圖片數量相關

#動畫各階段偏移值與圖片大小相關

• 本文範例最後一張圖片到第一張圖片沒有切換效果，一個想法是可以由最後一張圖片再挨個切換到第一個圖片
• #HTML

<div id="container">
    <div id="photo">
        <img  src="/static/imghwm/default1.png"  data-src="1.png"  class="lazy"   / alt="利用CSS如何實現圖片輪播效果？ （程式碼範例）" >
        <img  src="/static/imghwm/default1.png"  data-src="2.png"  class="lazy"   / alt="利用CSS如何實現圖片輪播效果？ （程式碼範例）" >
        <img  src="/static/imghwm/default1.png"  data-src="3.png"  class="lazy"   / alt="利用CSS如何實現圖片輪播效果？ （程式碼範例）" >
    </div>
</div>

解析： 這裡建立了三個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 問題######由於範例只有三個圖片，所以添加了三個動畫階段，每一階段都是透過設定遞增的margin-left 值達到切換的效果######設定的動畫階段（如：35%~60%）是動畫停留部分，和上一階段空餘時間（如25%~35%）即為動畫切換部分，各部分時間長短需要自己把控###### #######運行效果##################更多程式相關知識，請造訪：###程式設計影片###！ ！ ###

以上是利用CSS如何實現圖片輪播效果？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！