CSS3實現輪播圖的方法

這篇文章將為大家詳細講解有關CSS3實現輪播圖的方法，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

創新互聯專業為企業提供淮上網站建設、淮上做網站、淮上網站設計、淮上網站制作等企業網站建設、網頁設計與制作、淮上企業網站模板建站服務，10余年淮上做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

理論基礎

CSS3是CSS技術的升級版本，CSS3語言開發是朝著模塊化發展。CSS即層疊樣式表（Cascading StyleSheet），是在網頁制作時采用的層疊樣式表技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。CSS龐大而且比較復雜，CSS3把CSS分解為一些小的模塊，更多新的模塊也被加入進來。CSS3中的模塊包括：盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。

CSS3 animation 屬性和 @keyframes 規則

主體思想

1、準備相同大小的多個圖片

2、將要展示圖片橫排放在一個圖片容器里面

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

4、給圖片容器添加自定義動畫，在動畫不同階段設置遞增的偏移值

注意事項

動畫效果分為切換和停留兩部分
自定義動畫階段與圖片數量相關
動畫各階段偏移值與圖片大小相關
本文中示例最后一個圖片到第一個圖片沒有切換效果，一個思路是可以由最后一個圖片再挨個切換到第一個圖片

HTML

<p id="container">
    <p id="photo">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </p>
</p>

解析：
這里創建了三個 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;
	}
}

解析：

1、展示容器大小和圖片大小一致

2、圖片添加 float 效果，不用考慮麻煩的 margin 問題

3、由于示例只有三個圖片，所以添加了三個動畫階段，每一階段都是通過設置遞增的 margin-left 值達到切換的效果

4、設置的動畫階段（如：35%~60%）是動畫停留部分，和上一階段空余時間（如25%~35%）即為動畫切換部分，各部分時間長短需要自己把控

運行效果

CSS3實現輪播圖的方法