使用css3實現圖片輪播

• 前言：實現圖片輪播的方式有很多種 ，例如js ，css 等等。 本文主要講述使用純css3實現輪播圖

工具介紹： 使用的編輯器： Hbuilder

• 進入正題

html程式碼：

	<div id="slide_show">
		<div id="photos">
			<!--
            	作者：JavaBuild
            	時間：2018-10-21
            	描述：輪播圖
            -->
			<img id="first_slide_photo" src="images/slideshow_1.png" />
			<img src="images/banner.jpg"/>
			<img src="images/midbanner.jpg"/>
                                                    
		</div>
	</div>
 

解釋： 定義兩個div，第一個div用來確定展示的大小，第二個div用來實現圖片的輪播。

css程式碼：

/* start slide show */
#slide_show {
	/* 第一個div的尺寸 */
	width: 1360px; 
	height: 600px;
	/* overflow:hidden 表示超出這個div的展示內容將被隱藏 */
	overflow: hidden;
}

#photos {
	/* calc(1360px * 3) 代表 一共有三張圖片 ， 每張長度為1360px */
	width: calc(1360px * 3);
	height: 600px;
	/* animation 屬性 實現動畫效果，switch 動畫函式名稱，下面會寫這個函式，6s代表整個輪播時長, ease-out 方向  infinite 迴圈輪播 normal 正常結束不反向輪播*/
	-webkit-animation: switch 6s ease-out infinite normal;
}

#photos > img {
	float: left;/* 向左浮動 ，圖片連線無縫隙 */
	width: 1360px;
	height: 600px;
}

/* 輪播函式 */
@-webkit-keyframes switch{
	0%, 25% { /* 第1張圖所用時長 */
		margin-left: 0px; /* 第一張距離左側的長度 */
	}
	30%, 60% {/* 第2張圖所用時長 */
		margin-left: -1360px; /* 第一張距離左側的長度 */
	}
	70%, 100% {/* 第3張圖所用時長 */
		margin-left: -2720px; /* 第一張距離左側的長度 */
	}
}

/* end slideshow */
 

以上即可實現圖片的輪播，簡單易用。純css！