css3如何實現輪播圖？ css3實現輪播圖片的方法

我們在網頁上常常會看到有一塊位置會有很多的圖片來回切換，這就是輪播圖，輪播圖的出現，讓重要的訊息可以在一個位置顯現，那麼，輪播圖是如何實現的呢？輪播圖的實作用js或css都可以，這篇文章就來跟大家介紹css3如何來實現輪播圖效果。

css3實作輪播圖效果可以利用CSS3 animation 屬性和 @keyframes 規則。

ainimation實現動畫效果主要由兩部分組成： 
1、透過類似Flash動畫中的影格來宣告一個動畫；  
2、在animation屬性中呼叫關鍵影格宣告的動畫。

animation 屬性是一個簡寫屬性（推薦影片課程：css教學）

語法：animation: name duration timing-function delay iteration-count direction。

animation屬性值在這裡就不多介紹了，需要的話可以參考css手冊。

那下面我們就來直接看一個例子：

html：

<div id="container">
    <div id="photo">
        <img src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg" />
        <img src="http://img.zcool.cn/community/01b34f58eee017a8012049efcfaf50.jpg@1280w_1l_2o_100sh.jpg" />
        <img src="http://img.zcool.cn/community/01c60259ac0f91a801211d25904e1f.jpg@1280w_1l_2o_100sh.jpg" />
    </div>
</div>

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;
    }
}

說明：

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

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

由於範例只有三個圖片，所以添加了三個動畫階段，每一階段都是透過設定遞增的margin-left 值達到切換的效果

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

這篇文章為大家簡單介紹了關於css輪播圖效果的實現，更多關於css輪播圖的效果，大家可以去看看php中文網的特效下載# 。

相關推薦：

CSS3 實作簡單輪播圖

Bootstrap圖片輪播功能的實作

#jQuery實作圖片輪播投影片效果

以上是css3如何實現輪播圖？ css3實現輪播圖片的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！