用 CSS 做輪播圖

對於用 css 實現一個輪播圖的緣由，是那時候剛開始接觸前端，完全還不懂 js。但是有一個項目(就是一個用來應付面試的作品)需要做一個輪播的效果，當時第一反應就是用 css3 自定義動畫 -webkit-animation。做出來的效果自己覺得還可以，唯一的不足就是鼠標點擊切換 banner 圖和指定到某個圖。如果項目中不需要切換變換圖片的需求，用 css3 做，何嘗不是一種辦法。不多說，先上代碼：

 

html 代碼如下：

<div class="test">
    <a href="#" ><img class="img1" src="1.jpg" ></a>
    <a href="#" ><img class='img2' src="2.jpg" ></a>
    <a href="#" ><img class='img3' src="3.jpg" ></a>
    <a href="#" ><img class='img4' src="4.jpg" ></a>
</div>

 

接着 css 代碼：

@keyframes t1{
    0%{ left: 0; }
    20%{ left: 0; }
    25%{ left: -960px; }
    45%{ left: -960px; }
    50%{ left: -1920px; }
    70%{ left: -1920px; }
    75%{ left: -2880px; }
    95%{ left: -2880px; }
    100%{ left: 0; }
}
@keyframes t2{
    0%{ left: 960px; }
    20%{ left: 960px; }
    25%{ left: 0; }
    45%{ left: 0; }
    50%{ left: -960px; }
    70%{ left: -960px; }
    75%{ left: -1920px; }
    95%{ left: -1920px; }
    100%{ left: 960px; }
}
@keyframes t3{
    0%{ left: 1920px; }
    20%{ left: 1920px; }
    25%{ left: 960px; }
    45%{ left: 960px; }
    50%{ left: 0; }
    70%{ left: 0; }
    75%{ left: -960px; }
    95%{ left: -960px; }
    100%{ left: 1920px; }
}
@keyframes t4{
    0%{ left: 2880px; }
    20%{ left: 2880px; }
    25%{ left: 1920px; }
    45%{ left: 1920px; }
    50%{ left: 960px; }
    70%{ left: 960px; }
    75%{ left: 0; }
    95%{ left: 0; }
    100%{ left: 2880px; }
}

這里定義了 t1、t2、t3、t4 四個動畫名稱(兼容的寫法：自行在 'keyframes' 前加前綴)，主要是動畫里的幀數的設置技巧，因為只有4張圖，所以就取每次幀數增加 25% 的時候才讓 left 值減去圖片寬度，而在改變 left 值之前的 5%(這個值根據情況調整)處 left 值保持不變，而這個 5% 表示的就是輪播圖中圖片移動的時間，另外 20% 表示的就是圖片禁止的狀態。然后把這4個自定義動畫一一放到每一個 img 里，例如：

.test .img1{
    left: 0;
    -webkit-animation: t1 linear 12s infinite;
       -moz-animation: t1 linear 12s infinite;
        -ms-animation: t1 linear 12s infinite;
         -o-animation: t1 linear 12s infinite;
            animation: t1 linear 12s infinite;
}
.test .img2{
    left: 960px;
    -webkit-animation: t2 linear 12s infinite;
       -moz-animation: t2 linear 12s infinite;
        -ms-animation: t2 linear 12s infinite;
         -o-animation: t2 linear 12s infinite;
            animation: t2 linear 12s infinite;
}
.test .img3{
    left: 1920px;
    -webkit-animation: t3 linear 12s infinite;
       -moz-animation: t3 linear 12s infinite;
        -ms-animation: t3 linear 12s infinite;
         -o-animation: t3 linear 12s infinite;
            animation: t3 linear 12s infinite;
}
.test .img4{
    left: 2880px;
    -webkit-animation: t4 linear 12s infinite;
       -moz-animation: t4 linear 12s infinite;
        -ms-animation: t4 linear 12s infinite;
         -o-animation: t4 linear 12s infinite;
            animation: t4 linear 12s infinite;
}
.test:hover img{
    -webkit-animation-play-state: paused;
       -moz-animation-play-state: paused;
        -ms-animation-play-state: paused;
         -o-animation-play-state: paused;
            animation-play-state: paused;
}

代碼最后給了一個鼠標移上去，動畫停止的效果，整個輪播的時間自行設置，‘infinite’ 表示一直持續輪播。

ps：這個是一個正序的輪播，同理也可以實現正反序輪播，在定義動畫那里改改幀數設置就行，有疑問，歡迎在評論中提出，謝謝大家。