言

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

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

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

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

CSS

實現(xiàn)效果

首先我們來看看只使用CSS實現(xiàn)的輪播圖效果。

實現(xiàn)效果圖

具體分析

看到上述的實現(xiàn)效果后，我們來具體分析下頁面的構(gòu)成。

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

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

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

HTML頁面

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

首先來看看HTML頁面的實現(xiàn)，代碼中都有每個區(qū)域的描述。

HTML頁面

CSS部分

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

• 外層容器

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

外層容器

• 圖片標題

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

得到的代碼如下所示。

圖片標題

• 圖片與圖片容器

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

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

圖片與圖片容器

• 圖片動畫效果

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

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

圖片動畫效果

• 數(shù)字索引的基本屬性

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

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

數(shù)字索引基本屬性

• 數(shù)字索引的偏移量
  

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

數(shù)字水平偏移量

• 鼠標停在數(shù)字上的動畫效果

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

鼠標停在數(shù)字上的動畫效果

• 動畫效果賦予指定的數(shù)字

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

動畫效果賦予指定的數(shù)字

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

結(jié)束語

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

言

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

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

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

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

CSS

實現(xiàn)效果

首先我們來看看只使用CSS實現(xiàn)的輪播圖效果。

實現(xiàn)效果圖

具體分析

看到上述的實現(xiàn)效果后，我們來具體分析下頁面的構(gòu)成。

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

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

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

HTML頁面

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

首先來看看HTML頁面的實現(xiàn)，代碼中都有每個區(qū)域的描述。

HTML頁面

CSS部分

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

• 外層容器

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

外層容器

• 圖片標題

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

得到的代碼如下所示。

圖片標題

• 圖片與圖片容器

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

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

圖片與圖片容器

• 圖片動畫效果

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

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

圖片動畫效果

• 數(shù)字索引的基本屬性

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

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

數(shù)字索引基本屬性

• 數(shù)字索引的偏移量
  

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

數(shù)字水平偏移量

• 鼠標停在數(shù)字上的動畫效果

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

鼠標停在數(shù)字上的動畫效果

• 動畫效果賦予指定的數(shù)字

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

動畫效果賦予指定的數(shù)字

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

結(jié)束語

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

• 吧，用swiper做輪播圖其實很簡單，特別是官網(wǎng)在使用說明上已經(jīng)講得很清楚了。
• 但我還是在這里嘮叨幾下。
• 現(xiàn)有的js庫是很豐富的，其實我們常用到的組件都有了，輪播圖就是其中之一。
• 本文就講一下怎么用swiper做輪播圖，因為它是一個很出名的輪播圖組件。
• 更多文章請關(guān)注我的頭條號，我是落筆承冰。

一、百度一下“swiper”，進入它的中文官網(wǎng)。

• swiper歷經(jīng)了多個版本，我們就用最新的swiper4來說說吧。

二、調(diào)用swiper的方法有很多種，比如用npm安裝之類的，這里我們就用下載css和js庫文件來實現(xiàn)吧。

• 解壓后，里面有很多文件，找哪個呢？就是這兩個，一個是css，一個是js。

三、我們創(chuàng)建一個空白test.html文件來添加swiper。

• 引用剛才我們下載的那兩個文件。

四、開始做html部分。

• 接下來放入輪播的模塊了。

五、大家知道html只是一個外表，js才是內(nèi)核，于是我們加入js部分。

• 輪播是可以用了，但是真的很很不成看，只有一個很小的范圍可以輪播。

六、我們試著改一下輪播圖的大小，并加個顏色。

• 我們用谷歌瀏覽器F12進入控制臺，模擬手機界面看一下效果。

七、果然是滿寬高只有一半，可怎么劃動，只能劃到第三塊，怎么樣才能讓三回到一，循環(huán)劃動呢，加個loop:true就可以了。

• 然后我們再改改樣式，讓里面的字變大居中，變白色，再把body的邊距去掉。

八、再加個功能，讓它自動播，我不動手，讓它每秒跑到下一下張圖。

九、我們再加個分頁器，分頁器是什么東西，就是輪播下方的一個個小圓點，一點就是一頁，這里我們應該有三個點。

十、小圓點是有了，也會隨圖滾動了，可是它不能點擊啊，那好，我們加入這個就可以了點了。

• 還真的可以點擊了。

十一、人家的輪播圖有左右按鈕可以控制圖片上一張下一張，我們也可以加。

• 在js里聲明相應的對象

十二、即然只是入門，那么到這里就可以了，更多的使用方法，大家可以去官網(wǎng)查一下，最后，我把圖片放進去，做出真正的輪播圖吧。

• 我搞了三張圖，三張圖寬高大小不一，直接放進去了，多少會讓某些圖片少一截或是只看見一部分，這個問題大家自己修改圖片或添加樣式來處理了，我就不再說了。