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

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

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

（推薦教學：CSS影片教學）

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

（實現一張一張的輪播，肉眼只看見一張圖片）

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

<div class="out">
	<div class="imgs">
		<img  src="/static/imghw/default1.png"  data-src="img/beatuy.jpg"  class="lazy"  / alt="怎麼用css實現無縫輪播圖切換？" >
		<img  src="/static/imghw/default1.png"  data-src="img/child.jpg"  class="lazy"  / alt="怎麼用css實現無縫輪播圖切換？" >
		<img  src="/static/imghw/default1.png"  data-src="img/girl.jpg"  class="lazy"  / alt="怎麼用css實現無縫輪播圖切換？" >
		<img  src="/static/imghw/default1.png"  data-src="img/milk.jpg"  class="lazy"  / alt="怎麼用css實現無縫輪播圖切換？" >
		<img  src="/static/imghw/default1.png"  data-src="img/cup.jpg"  class="lazy"  / alt="怎麼用css實現無縫輪播圖切換？" >
		<img  src="/static/imghw/default1.png"  data-src="img/dog.jpg"  class="lazy"  / alt="怎麼用css實現無縫輪播圖切換？" >
		<img  src="/static/imghw/default1.png"  data-src="img/beatuy.jpg"  class="lazy"  / 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
	}
}

這樣圖片就可以輪播了。

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

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

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

更多程式設計相關知識，請造訪：程式設計學習！ ！

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