使用css3實現圖片輪播

• 前言：實現圖片輪播的方式有很多種 ，例如js ，css 等等。 本文主要講述使用純css3實現輪播圖

  工具介紹： 使用的編輯器： Hbuilder

• 進入正題

html程式碼：

    <div id="slide_show">
        <div id="photos">
            <!--
                作者：JavaBuild
                時間：2018-10-21
                描述：輪播圖
            -->
            <img id="first_slide_photo" src="images/slideshow_1.png" />
            <img src="images/banner.jpg"/>
            <img src="images/midbanner.jpg"/>
                                                    
        </div>
    </div>
 

解釋： 定義兩個div，第一個div用來確定展示的大小，第二個div用來實現圖片的輪播。

css程式碼：

/* start slide show */
#slide_show {
    /* 第一個div的尺寸 */
    width: 1360px; 
    height: 600px;
    /* overflow:hidden 表示超出這個div的展示內容將被隱藏 */
    overflow: hidden;
}

#photos {
    /* calc(1360px * 3) 代表 一共有三張圖片 ， 每張長度為1360px */
    width: calc(1360px * 3);
    height: 600px;
    /* animation 屬性 實現動畫效果，switch 動畫函式名稱，下面會寫這個函式，6s代表整個輪播時長, ease-out 方向  infinite 迴圈輪播 normal 正常結束不反向輪播*/
    -webkit-animation: switch 6s ease-out infinite normal;
}

#photos > img {
    float: left;/* 向左浮動 ，圖片連線無縫隙 */
    width: 1360px;
    height: 600px;
}

/* 輪播函式 */
@-webkit-keyframes switch{
    0%, 25% { /* 第1張圖所用時長 */
        margin-left: 0px; /* 第一張距離左側的長度 */
    }
    30%, 60% {/* 第2張圖所用時長 */
        margin-left: -1360px; /* 第一張距離左側的長度 */
    }
    70%, 100% {/* 第3張圖所用時長 */
        margin-left: -2720px; /* 第一張距離左側的長度 */
    }
}

/* end slideshow */
 

以上即可實現圖片的輪播，簡單易用。純css！