css輪播圖怎么做？

這篇文章給大家分享的是css輪播圖的制作步驟，相信大部分人都還沒學會這個技能，為了讓大家更加了解，給大家總結了以下內容，話不多說，一起往下看吧。

基本需求分析

由于css無法做到js一樣的精準操控，所有某些效果是無法實現的，比如在輪播的同時支持用戶左右滑動，所以使用css智能實現基本的效果。下面列出來的內容就是我們實現的：

1、在固定區域中，內部內容自行滑動切換形成播放的效果

2、當切換到最后一張內容時，會反向播放或者回到起點重播

3、每張內容會停留一段時間，讓用戶能夠看清楚

4、內容可以點擊/進行操作

dom結構搭建

首先要有一個容器作為輪播圖的容器，同時由于要實現滑動切換，所以內部需要有一個裝載所有待切換內容的子容器

如果子容器中的內容是左右切換的，則需要將內容左右排列開

下面以輪播圖片為例，上代碼

<div class="loop-wrap">
    <div class="loop-images-container">
        <img src="darksky.jpg" alt="" class="loop-image">
        <img src="starsky.jpg" alt="" class="loop-image">
        <img src="whiteland.jpg" alt="" class="loop-image">
        <img src="darksky.jpg" alt="" class="loop-image">
        <img src="starsky.jpg" alt="" class="loop-image">
    </div>
</div>

.loop-wrap 是主容器

.loop-images-container 是承載內部圖片的子容器

.loop-image 是圖片內容，如果需要顯示其他內容，可以自定義

css實現靜態效果

輪播圖內每一頁內容的寬高應該相同，且等于主容器.loop-wrap寬高

.loop-images-container的寬高必然有一個大于外部主容器，overflow屬性應該設置為hidden。那為什么不設置為auto呢？我不告訴你，你可以自己試試看。

.loop-wrap {
    position: relative;
    width: 500px;
    height: 300px;
    margin: 100px auto;
    overflow: hidden;
}
.loop-images-container{
    position: absolute;
    left: 0; top: 0;
    width: 500%; /* 橫向排列 5張圖片 寬度應為主容器5倍 */
    height: 100%;
    font-size: 0;
}
.loop-image{
    width: 500px;
    height: 300px;
}

下面在瀏覽器中打開頁面，就可以看到不帶輪播效果的靜態頁面了，除了第一張圖片，其他圖片都不可見

css實現輪播效果

輪播效果說到底就是一個動畫效果，而通過css3的新屬性 animation 我們就可以自定義一個動畫來達到輪播圖效果。下面先來了解一下 animation 這個屬性

/*
animation: name duration timing-function delay iteration-count direction
name: 動畫名
duration： 動畫持續時間 設置為0則不執行
timing-function：動畫速度曲線
delay：動畫延遲開始時間 設置為0則不延遲
iteration-count：動畫循環次數 設置為infinite則無限次循環
direction：是否應該輪流反向播放動畫 normal 否 alternate 是
*/

animation 的 name 值是動畫名，動畫名可以通過 @keyframes 創建自定義動畫規則

分析動畫

要實現輪播，本質上是使內部承載內容的子容器 .loop-images-container 進行位移，從而使不同位置的內容一次展示在用戶眼前

共有五張圖片需要展示，如果輪播總耗時10s，那么每張圖片應該有2s的時間(20%)，而每張圖片耗時的構成是切換耗時+展示耗時，如果切換耗時500ms(5%)，展示耗時就應該是1500ms(15%)

于是這樣改造css

.loop-images-container{
    position: absolute;
    left: 0; top: 0;
    width: 500%;
    height: 100%;
    font-size: 0;
    transform: translate(0,0); /* 初始位置位移 */
    animation: loop 10s linear infinite;
}
/* 創建loop動畫規則 */
/* 
   輪播5張，總耗時10s，單張應為2s(20%)
   單張切換動畫耗時500ms，停留1500ms
*/
@keyframes loop {
    0% {transform: translate(0,0);}
    15% {transform: translate(0,0);} /* 停留1500ms */
    20% {transform: translate(-20%,0);} /* 切換500ms 位移-20% */
    35% {transform: translate(-20%,0);}
    40% {transform: translate(-40%,0);}
    55% {transform: translate(-40%,0);}
    60% {transform: translate(-60%,0);}
    75% {transform: translate(-60%,0);}
    80% {transform: translate(-80%,0);}
    95% {transform: translate(-80%,0);}
    100% {transform: translate(0,0);} /* 復位到第一張圖片 */
}

純css實現輪播圖效果完成

這是一個方向的輪播效果，想要實現往返方向的輪播效果，小伙伴們可以試試direction的alternate，但是自定義動畫規則的時間間隔也要重新計算了哦！

關于css輪播圖的制作就分享到這里了，解決問題并不止文章中和大家分析的辦法，不過本文分析的方法準確性是不容置疑的。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。