我的練習：使用HTML+CSS3製做圖片輪播功能（不使用JavaScript）

時間 2019-12-09

標籤我的練習使用 html+css3 html css 製做圖片功能不使 javascript 欄目 HTML 简体版

原文原文鏈接

先上效果圖，不要在乎用來當素材的圖片：css

在搜索相關資料的時候，查到有兩種實現方式：一是使用JavaScript，二是使用CSS3中的Animation（動畫），這裏使用的是CSS3中的Animation實現的圖片輪播功能。html

首先咱們要理解這個圖片輪播的結構，我一早上都由於沒有理解結構在那裏浪費時間，中午睡了一覺起來思路就通了，就。。。作出來了┑(￣Д ￣)┍jquery

其實就和老式電影放映機差很少原理，要顯示的內容就是膠片上的一張張照片，並排排列：css3

輪播起來就像播放老式電影同樣，膠片移動，顯示區域會顯示想要顯示的那張照片：瀏覽器

我理解的輪播的原理就到這裏爲止了，接下來是實戰部分。動畫

注：由於會出現一層套一層的建立區域，代碼部分若是有在某個區域內建立第二個區域的話，新建立的區域的代碼部分會加粗顯示。spa

先建立一個最外層的<div>做爲輪播區域的容器，id=homepage：插件

HTML：
1 <body>
2     <!-- 裏面有一個輪播區域 -->
3     <div id="homepage">
4     </div>
5     <!-- #裏面有一個輪播區域 end -->
6 </body>

以後咱們的輪播區域都建立在這個id=homepage的<div>中了。這裏稍微設置一下它的樣式，這個不必定要跟我同樣，我這樣設置只是我本身看的舒服：code

CSS：
 1 /* 去除div區域與瀏覽器之間的邊界 */
 2 body{
 3     margin:0px;
 4     padding:0px;
 5 }
 6 
 7 /* 最外層的div區域，裏面有一個輪播區域 */
 8 #homepage {
 9     width:100%;
10     height:500px;
11     background-color:#E8E8FF;
12 }

就一片灰我就不截效果了。orm

在這個區域內再建立一個<div>區域，class=carousel。這個<div>至關於老式電影放映機的鏡頭（顯示區域）：

HTML：
1 <!-- 裏面有一個輪播區域 -->
2 <div id="homepage">
3     <!-- 輪播區域 -->
4     <div class="carousel">
5     </div>
6     <!-- #輪播區域 end -->
7 </div>
8 <!-- #裏面有一個輪播區域 end -->

設置CSS樣式讓它居中在頁面中顯示：

CSS：
 1 /* 輪播區域 */
 2 .carousel {
 3     /* 設置顯示區域的寬度和高度 */
 4     width:600px;
 5     height:300px;
 6     /* 隱藏溢出的內容
 7     overflow:hidden; */
 8     
 9     /* 居中顯示這個div區域 */
10     position:relative;
11     top:50%;
12     left:50%;
13     transform:translate(-50%,-50%);
14     
15     background-color:black;    /* 完成輪播時刪除 */
16 }

鏡頭（顯示區域）的大小和膠片上的照片（輪播的內容）的大小是一致的。這裏的overflow先註釋，先不用，等會看到膠片（輪播內容的集合）的效果後再啓用。此時頁面是這樣的：

接下來咱們在鏡頭（顯示區域）中建立膠片（顯示內容的集合），class=carousel-set。

注意：這個<div>並非直接放內容的，它跟一個空白膠片同樣，輪播的內容就是照片，要拍攝後纔有內容（也便是說咱們還要在「膠片」中建立<div>區域）。

HTML：
 1 <!-- 裏面有一個輪播區域 -->
 2 <div id="homepage">
 3     <!-- 輪播區域 -->
 4     <div class="carousel">
 5         <!-- 輪播內容的集合 -->
 6         <div class="carousel-set">
 7         </div>
 8         <!-- #輪播內容的集合 end -->
 9     </div>
10     <!-- #輪播區域 end -->
11 </div>
12 <!-- #裏面有一個輪播區域 end -->

而後設置一下CSS的樣式，假設咱們要顯示四張照片，那咱們就給它預留五張照片的位置（寬度），第五張和第一張相同，要給人一種無縫循環的感受：

CSS：
1 /* 輪播內容的集合 */
2 .carousel-set {
3     width:3000px;    /* 設置寬度爲輪播內容寬度的總和 */
4     height:300px;    /* 輪播內容的高度 */
5     
6     background-color:blue;    /* 完成輪播時刪除 */
7 }

此時的效果以下：

由於寬度太長了，甚至超出了瀏覽器的範圍。這個不用擔憂，咱們以前在鏡頭（顯示區域）的樣式中有設置了overflow，只是暫時註釋掉了而已，後面膠片（顯示內容的集合）效果出來後咱們再啓用overflow。

膠片（顯示內容的集合）準備好了，接下來就是膠片上的內容，也就是照片（顯示內容）啦。

在膠片（顯示內容的集合）中，建立咱們的照片（顯示內容）的<div>。可能會有人問（不，不會有人問的的）：爲啥是一個<div>不直接上<img>呢？你想一想，咱們用<div>，那咱們可不止能顯示照片，咱們還能顯示文字，或者放個超連接等等，能夠擴展嘛。咱們準備顯示四張照片，那咱們就建立五張照片的位置（<div>區域），第五張和第一張相同，要給人一種無縫循環的感受：

HTML：
 1 <!-- 裏面有一個輪播區域 -->
 2 <div id="homepage">
 3     <!-- 輪播區域 -->
 4     <div class="carousel">
 5         <!-- 輪播內容的集合 -->
 6         <div class="carousel-set">
 7             <!-- 輪播的內容 -->
 8             <div class="carousel-content">
 9                 <img src="image/1.png" alt="非著名調查員:蒼穹之章" />
10             </div>
11             <div class="carousel-content">
12                 <img src="image/2.png" alt="非著名調查員:蒼穹之章" />
13             </div>
14             <div class="carousel-content">
15                 <img src="image/3.png" alt="非著名調查員:蒼穹之章" />
16             </div>
17             <div class="carousel-content">
18                 <img src="image/4.png" alt="非著名調查員:蒼穹之章" />
19             </div>
20             <div class="carousel-content">
21                 <img src="image/1.png" alt="非著名調查員:蒼穹之章" />
22             </div>
23             <!-- #輪播的內容 end -->
24         </div>
25         <!-- #輪播內容的集合 end -->
26     </div>
27     <!-- #輪播區域 end -->
28 </div>
29 <!-- #裏面有一個輪播區域 end -->

這裏順便將要輪播的圖片加上去了，由於純色。。。不太好分辨內容間的間隔（雖然的素材黑邊原本就很差分別，不要在乎這些細節）而後設置一下CSS樣式，讓膠片（輪播內容的集合）成型：

CSS：
 1 /* 輪播的內容 */
 2 .carousel-content {
 3     width:600px;
 4     height:300px;
 5     float:left;    /* 設置左浮動，讓輪播內容排成一行 */
 6 }
 7 
 8 /* 輪播的內容中的<img>標籤 */
 9 .carousel-content>img{
10     width:100%;
11     height:100%;
12 }

此時的運行效果以下：

是否是就有種膠片（內容的集合）的感受啦，接下來咱們嘗試讓這個膠片（內容的集合）移動。接下來就到這邊文章的主角——CSS3中的Animation出場了！

Animation這裏就不作過多介紹，畢竟這個筆記是介紹實現輪播功能，不是介紹Animation的。接下來步驟不理解的話建議去看一下Animation的一些資料。

咱們先建立CSS3的@keyframes規則，這個規則和關鍵幀很像，好比一個動畫，在播放到50%的時候是一個關鍵幀，播放到100%的時候是一個關鍵幀，關鍵幀之間有補幀，讓動畫看起來更加流暢。

CSS：
 1 /* keyframes規則 */
 2 @keyframes playMovie {
 3     0% {margin-left:0px;}
 4     10% {margin-left:0px;}
 5     20% {margin-left:-600px;}
 6     40% {margin-left:-600px;}
 7     50% {margin-left:-1200px;}
 8     70% {margin-left:-1200px;}
 9     80% {margin-left:-1800px;}
10     90% {margin-left:-1800px;}
11     100% {margin-left:-2400px;}
12 }

這裏採用的是修改膠片（顯示內容的集合）的左側外邊距的方式來移動膠片（顯示內容的集合）。接下來咱們在膠片的CSS樣式表中應用這個動畫規則：

CSS：
1 /* 輪播內容的集合 */
2 .carousel-set {
3     /* 應用動畫 */
4     animation:playMovie 15s linear infinite;
5 }

此時運行效果已經很接近了：

再把鏡頭（顯示區域）中的overflow:hidden;啓用，就能實現咱們想要的效果了：

實例下載：

連接：https://pan.baidu.com/s/1wK2HmVbxC2ru2K78-xQECg
提取碼：1pz0

複製這段內容後打開百度網盤手機App，操做更方便哦

不知道爲何百度雲今天創不了不用提取碼的分享，只能分享個須要提取碼的連接了，等啥時候能建立不須要提取碼鏈接的時候我在換掉吧_(:з」∠)_

參考資料：

菜鳥教程 - CSS3動畫：http://www.runoob.com/css3/css3-animations.html

JQuery插件庫 - 純CSS3圖片輪播效果：http://www.jq22.com/jquery-info11736

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。