在CSS中實(shí)現(xiàn)一個(gè)簡(jiǎn)易的輪播圖非常容易。我們可以用一個(gè)ul元素來(lái)包含所有圖片，然后通過(guò)設(shè)置ul的寬度使所有圖片排成一排。

接著，我們?cè)O(shè)定一個(gè)每個(gè)li元素的寬度，讓每個(gè)li元素只能顯示一張圖片。如果圖片高度不一致，可能需要將li元素的高度設(shè)置得大于所有圖片的高度，防止出現(xiàn)奇怪的空隙。

之后，我們可以通過(guò)給ul元素一個(gè)無(wú)限循環(huán)的動(dòng)畫(huà)來(lái)實(shí)現(xiàn)輪播。我們可以使用CSS3的keyframe動(dòng)畫(huà)，在某個(gè)時(shí)間點(diǎn)上改變ul元素的left屬性。

.carousel {
width: 350px;
height: 200px;
overflow: hidden;
}
.carousel ul {
list-style: none;
margin: 0;
padding: 0;
width: 9999px;
height: 200px;
position: relative;
-webkit-animation: slide 15s linear infinite;
animation: slide 15s linear infinite;
}
.carousel ul li {
float: left;
width: 350px;
height: 200px;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
}
@-webkit-keyframes slide {
0% { left: 0; }
100% { left: -10500px; }
}
@keyframes slide {
0% { left: 0; }
100% { left: -10500px; }
}