首頁  >  文章  >  web前端  >  怎麼用css實現無縫輪播圖切換?

怎麼用css實現無縫輪播圖切換?

青灯夜游
青灯夜游原創
2020-11-26 10:36:427179瀏覽

css實現無縫輪播圖切換的方法:首先使用animation屬性設定要綁定到選擇器的keyframes的名稱、完成動畫所花費的時間、動畫的速度曲線、動畫的播放次數;然後使用@keyframes規則建立輪播動畫,指定每個關鍵影格中圖片的定位樣式。

怎麼用css實現無縫輪播圖切換?

本教學操作環境:windows7系統、css3版,此方法適用於所有品牌電腦。

(推薦教學:CSS影片教學

使用CSS3實作:利用animation屬性@keyframes規則

(實現一張一張的輪播,肉眼只看見一張圖片)

HTML部分比較簡單,兩個div下包著幾個img標籤;為了實現無縫輪播,注意第一張圖片要與最後一張圖片相同;

<div class="out">
	<div class="imgs">
		<img  src="img/beatuy.jpg"/ alt="怎麼用css實現無縫輪播圖切換?" >
		<img  src="img/child.jpg"/ alt="怎麼用css實現無縫輪播圖切換?" >
		<img  src="img/girl.jpg"/ alt="怎麼用css實現無縫輪播圖切換?" >
		<img  src="img/milk.jpg"/ alt="怎麼用css實現無縫輪播圖切換?" >
		<img  src="img/cup.jpg"/ alt="怎麼用css實現無縫輪播圖切換?" >
		<img  src="img/dog.jpg"/ alt="怎麼用css實現無縫輪播圖切換?" >
		<img  src="img/beatuy.jpg"/ alt="怎麼用css實現無縫輪播圖切換?" >
	</div>
</div>

最外層div設定ovflow:hidden;position: relative;既然最外層div設定了position: relative;所以內層div需要設定position: absolute;使得其運動相對父元素而言;

CSS程式碼如下:

.out{
	width: 200px;
	height: 100px;
	overflow: hidden;
	position: relative;
}

.imgs {
	width: 1400px;
	height: 100px;
	position: absolute;
	animation: ppt 10s linear infinite;
}

img {
	float: left;
	width: 200px;
	height: 100px;
}

@keyframes ppt {
	0% {
		left: 0px
	}
	20% {
		left: -250px
	}
	40% {
		left: -500px
	}
	60% {
		left: -750px
	}
	80% {
		left: -1000px
	}
	100% {
		left: -1200px
	}
}

這樣圖片就可以輪播了。

怎麼用css實現無縫輪播圖切換?

但是滑鼠放上去的時候圖片還是一直在輪播的,如果我們想讓滑鼠放在圖片上時,輪播停止,或者出現一些訊息,我們需要加上:hover;設定動畫的狀態,程式碼很簡潔:如下

.out:hover .imgs{
   animation-play-state:paused;
}

這樣我們的輪播效果就出來啦;

怎麼用css實現無縫輪播圖切換?

更多程式設計相關知識,請造訪:程式設計學習! !

以上是怎麼用css實現無縫輪播圖切換?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn