首頁  >  文章  >  web前端  >  利用CSS如何實現圖片輪播效果? (程式碼範例)

利用CSS如何實現圖片輪播效果? (程式碼範例)

青灯夜游
青灯夜游轉載
2021-03-15 10:31:343578瀏覽

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

利用CSS如何實現圖片輪播效果? (程式碼範例)

【推薦教學:CSS影片教學

理論基礎

CSS3 animation 屬性和@keyframes 規則

主體思想

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

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

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

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

  • #注意事項

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

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

#動畫各階段偏移值與圖片大小相關
  • 本文範例最後一張圖片到第一張圖片沒有切換效果,一個想法是可以由最後一張圖片再挨個切換到第一個圖片
  • #HTML

<div id="container">
    <div id="photo">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </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中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除