望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。

【技術等級】初級

【承接文章】《CSS三個重要的定位屬性，使用頻率超高，定位屬性詳解》

上兩篇文件主要講解了定位屬性的使用，本篇文章小海老師帶領大家利用定位屬性制作一個輪播圖的前端界面。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。

本文以動手實踐為主，希望跟著學的同學們按照下面所講的步驟一步一步的操作一下。前端開發注重實踐操作，只要你按照小海老師所講的步驟操作，一定能夠掌握輪播圖界面的制作方式。如果能抽出時間多做幾次，熟能生巧，相信你會從中學習到在容器內部對元素進行定位的一類方法。

一、我們要做的輪播圖界面展示：

輪播圖案例界面展示

本案例旨在利用CSS的定位屬性制作輪播圖的界面，并不涉及輪播圖的各項行為。輪播圖的各項行為需要借助JavaScript腳本技術實現，在后續的內容中會逐步介紹。首先我們對這個案例進行一下簡單的分析。

通過上圖，我們可以總結出，整個案例需要一個總的容器，我們可以使用<div></div>實現，并為其設置一個名為lunbo的id屬性取值。即：

<div id=”lunbo”></div>

在這個容器內部，有下列對象：

• 一張圖片。（因為制作界面，所以展示只放置一張圖片即可）

• 左右兩側各有兩個箭頭圖標，用于鼠標單擊產生輪播效果。

• 下方有一個黑色透明的部分。

• 黑色透明的部分內部有5個數字組成的矩形，用于鼠標單擊時跳轉到指定的圖片。

二、輪播圖界面布局的原理：

通過分析，我們發現，大部分內容都在#lunbo的<div>容器中。那么，如何在容器內部對各個元素進行位置的確定呢？這就需要使用CSS技術中的定位屬性。

這里，有一個這類問題的處理方法，它的原理如下所示。

在容器內部實現元素的定位，需要：將容器的定位方式設置為為“相對定位”，內部元素的定位方式設置為“絕對定位”。這樣，對內部元素使用位置屬性（left、top、right、bottom），就能夠實現相對于容器左上角的定位方式了。

根據上述原理，我們很容易就能寫出容器的CSS代碼。

這里設圖片的尺寸為800px*400px，則容器的CSS代碼如下所示：

#lunbo{

width:800px; height:400px;

position:relative;

}

三、實現容器內部的HTML對象：

下面我們來實現容器內部的各個HTML對象。注意，本小節只實現各個HTML對象，不對各個對象進行CSS樣式設計。

1、一張圖片：

<img src=”images/01.jpg” />

2、左右兩側各有兩個箭頭圖標：

• 左側箭頭利用小于號顯示，小于號在HTML中使用 &lt; 實現。放在一個容器中并設置class為small。

• 右側箭頭利用大于號顯示，大于號在HTML中使用 &gt; 顯示。放在一個容器中并設置class為big。

<div>&lt;</div>

<div>&gt;</div>

3、下方有一個黑色透明的部分：

<div class="black"></div>

4、黑色透明的部分內部有5個數字組成的矩形：

五個數字分別用<span></span>標記對實現的，并安排在一個名為num的容器中，最后放在黑色透明容器內部。

<div class=”black”> <!--black容器開始-->

<div class="num"> <!--num容器開始-->

<span>1</span>

<span>2</span>

<span>3</span>

<span>4</span>

<span>5</span>

</div> <!--num容器結束-->

</div> <!--black容器結束-->

整體的HTML代碼如下所示。

輪播案例的HTML代碼

四、左右兩側箭頭圖標的樣式：

左右兩側的箭頭設置寬度為40px，高度為60px，背景顏色位白色，并設置一定的透明度。字體為Arial，字體大小為50px，水平方向和垂直方向均居中對齊。文字顏色為#666666，鼠標經過時顯示手型鼠標。

這些樣式兩個箭頭都具備，所以使用群組選擇器。

#lunbo .small,#lunbo .big{

width:40px; height:60px;

background-color:rgba(255,255,255,0.3);

font-family: Arial;

font-size: 50px;

text-align: center;

color:#666666;

cursor:pointer;

}

為了在容器#loubo中對這兩個箭頭定位，所以應該將這兩個箭頭設置為“絕對定位”，并分別設置位置屬性。

因為兩個箭頭的高度位置相同，所以top屬性取值一樣。通過測試，選擇top屬性為175px。

• 左側小于號箭頭設置left屬性為50px。

• 右側大于號箭頭設置right屬性為50px。

#lunbo .small,#lunbo .big{position:absolute;top:175px;}

#lunbo .small{left:50px;}

#lunbo .big{right:50px;}

除此之外，還需要為這兩個箭頭設置鼠標經過時的背景顏色變化。

#lunbo .small:hover,

#lunbo .big:hover{

background-color: rgba(255,255,255,0.6);

}

綜上所述，左右兩側箭頭圖標的CSS樣式代碼如下所示。

左右兩側箭頭圖標的CSS代碼

五、黑色透明的部分的樣式：

設置黑色透明的部分寬度為容器#lunbo的寬度，因此可以將寬度的取值設置為inherit，意思為寬度的大小繼承該元素容器的大小。高度設置為40px，背景顏色為黑色并帶有一定的透明度，利用定位將其設置在容器的底端。CSS代碼如下所示。

#lunbo .black{

width:inherit; height:40px;

background-color: rgba(0,0,0,0.7);

position:absolute;

left:0; bottom:0;

}

六、黑色透明部分內部的數字：

做為數字的直接容器num，只需要設置位置屬性，以保證這5個數字的位置在黑色透明部分的右側。

#lunbo .num{

position:absolute;

right:10px;

bottom:8px;

}

容器num內部的span標記對用于盛放每一個數字。因為<span>標記對作為內聯元素無法設置寬度和高度，所以將所有的<span>標記對變為內聯塊。設置它們的寬度為20px，高度為24px，背景顏色位為999999，水平垂直方向居中對齊，文字顏色為#ffffff，字號大小為14px，鼠標經過時變為手型鼠標。為了讓它們之間具有一定的距離，可以設置每一個<span>的右邊界為10px。

#lunbo .num span{

display:inline-block;

width:20px; height:24px;

background-color: #999999;

text-align: center;

line-height: 24px;

color:#ffffff;

font-size: 14px;

margin-right:10px;

cursor:pointer;

}

最后設置這些<span>標記對鼠標經過時背景顏色的變化。

#lunbo .num span:hover{

background-color: #ff5857;

}

綜上所述，黑色透明部分內部的數字的CSS樣式代碼如下所示。

黑色透明部分內部的數字的CSS代碼

七、結束：

最后請同學們將這些代碼整理到一起，看看能不能實現。

仔細的同學們肯定能夠發現，整個項目中，第一個數字的背景顏色和其它數字的背景顏色是不一樣的，這是為了說明此時是第一張圖片在顯示。這是如何實現的呢？

<span style="background-color:#ff5857">1</span>

大家想一想，這段代碼是不是就能夠實現了呢！

文章預告

下一篇文章中，小海老師繼續帶大家實現跟定位有關的實例，一同看一看定位屬性都有哪些應用領域，對定位技術有疑問的學習者千萬不要錯過！

小海教材

如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

言

輪播圖已經是一個很常見的東西，尤其是在各大App的首頁頂部欄，經常會輪番顯示不同的圖片。

一提到輪播圖如何實現時，很多人的第一反應就是使用Javascript的定時器，當然這種方法是可以實現的。不過就是有些繁瑣，今天這篇文章我們來看看如何不用Javascript，而使用純CSS代碼去實現輪播圖吧。

這篇文章的所有代碼我都放在了github上，感興趣的同學可以去看看。

https://github.com/zhouxiongking/article-pages/blob/master/articles/carousel/carousel.html

CSS

實現效果

首先我們來看看只使用CSS實現的輪播圖效果。

實現效果圖

具體分析

看到上述的實現效果后，我們來具體分析下頁面的構成。

• 頁面在布局上首先要有5張圖片，圖片固定寬度。

• 每張圖片對應一個標題，標題通過ul>li實現，事先算好寬度，跟隨圖片一起滾動。

• 下邊有個1,2,3,4,5表示圖片順序的索引，鼠標放上去后會顯示對應的圖片。

HTML頁面

接下來我們通過代碼層面去看看整個效果是如何實現的。

首先來看看HTML頁面的實現，代碼中都有每個區域的描述。

HTML頁面

CSS部分

實現這個效果主要是通過CSS代碼的，其代碼量比較大，我們分開來看。

• 外層容器

對于最外層容器我們設置絕對定位，方便圖片標題子元素的定位。

外層容器

• 圖片標題

對于圖片的標題我們也采用絕對定位，并且讓標題橫向一行展示，方便在動畫的時候直接橫向滾動。

得到的代碼如下所示。

圖片標題

• 圖片與圖片容器

接下來是設置圖片容器屬性以及圖片的基本大小。

圖片容器也采用絕對定位，寬度可以動態設置，根據圖片數量計算。每張圖片設置寬度與高度，得到的代碼如下。

圖片與圖片容器

• 圖片動畫效果

然后設置圖片的動畫效果，對于任意的圖片都有進入和靜止兩個狀態，中間的效果可以任意定制。

在這里，中間效果設置成5%的間隔，其他時間在進行位置的切換，因為圖片是處于水平分布，通過設置margin-left的值為負數進行偏移即可。

圖片動畫效果

• 數字索引的基本屬性

對于下面的數字圖標也是通過基本的CSS屬性進行設置的，包括寬高，行高，透明度等等。

在鼠標移動到對應的數字上后，數字會顯示不同的顏色。而且在鼠標停留在數字上后，動畫效果會暫停。

數字索引基本屬性

• 數字索引的偏移量
  

因為數字是水平方向展示的，因此要設定每個數字的水平偏移量。

數字水平偏移量

• 鼠標停在數字上的動畫效果

然后就是處理鼠標停留在數字上的動畫效果，因為每張圖片對應特定的數字，需要計算出每次的動畫開始位置和結束位置。

鼠標停在數字上的動畫效果

• 動畫效果賦予指定的數字

最后一步就是將定義的動畫效果賦予指定的數字上，每個數字都有特定的id。得到的代碼如下。

動畫效果賦予指定的數字

至此所有步驟完成了，就可以得到文章開始的動畫效果了。

結束語

這篇文章完全通過CSS實現了一個輪播圖的效果，相比于使用JS來說減少頁面阻塞程度，效果更好。