如何用CSS寫輪播圖效果？-css教學-PHP中文網

如何用CSS寫輪播圖效果？

Guanhui

發布： 2020-05-13 10:46:05

轉載

3559 人瀏覽過

如何用CSS寫輪播圖效果？

相信很多小夥伴做過的專案裡面都有輪播圖這麼一個需求，有的小夥伴可能會自己造輪子，有的小夥伴可能會直接Google輪播圖外掛

但是如果不使用javascript，能不能實現輪播圖的效果呢？或許小夥伴們並沒有考慮過這個問題，那麼下面我們就一起來用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實現輪播圖效果完成

想要直接看效果的小夥伴可以猛戳下面的連結

純css實現輪播圖效果

這是一個方向的輪播效果，想要實現往返方向的輪播效果，朋友們可以試試

direction的alternate ，但是自訂動畫規則的時間間隔也要重新計算了喔！

推薦教學：《

CSS教學》

以上是如何用CSS寫輪播圖效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！