前言 輪播圖已經是一個很常見的東西,尤其是在各大App的首頁頂部欄,經常會輪番顯示不同的圖片。 一提到輪播圖如何實現時,很多人的第一反應就是使用Javascript的定時器,當然這種方法是可以實現的。不過就是有些繁瑣,今天這篇文章我們來看看如何不用Javascript,而使用純CSS代碼去實現輪播圖 ...
前言
輪播圖已經是一個很常見的東西,尤其是在各大App的首頁頂部欄,經常會輪番顯示不同的圖片。
一提到輪播圖如何實現時,很多人的第一反應就是使用Javascript的定時器,當然這種方法是可以實現的。不過就是有些繁瑣,今天這篇文章我們來看看如何不用Javascript,而使用純CSS代碼去實現輪播圖吧。
這篇文章的所有代碼我都放在了群文件了,感興趣的同學可以去下載看看。
CSS
實現效果
首先我們來看看只使用CSS實現的輪播圖效果。
實現效果圖
具體分析
看到上述的實現效果後,我們來具體分析下頁面的構成。
-
頁面在佈局上首先要有5張圖片,圖片固定寬度。
-
每張圖片對應一個標題,標題通過ul>li實現,事先算好寬度,跟隨圖片一起滾動。
-
下邊有個1,2,3,4,5表示圖片順序的索引,滑鼠放上去後會顯示對應的圖片。
HTML頁面
接下來我們通過代碼層面去看看整個效果是如何實現的。
首先來看看HTML頁面的實現,代碼中都有每個區域的描述。
HTML頁面
CSS部分
實現這個效果主要是通過CSS代碼的,其代碼量比較大,我們分開來看。
-
外層容器
對於最外層容器我們設置絕對定位,方便圖片標題子元素的定位。
外層容器
-
圖片標題
對於圖片的標題我們也採用絕對定位,並且讓標題橫向一行展示,方便在動畫的時候直接橫向滾動。
得到的代碼如下所示。
圖片標題
-
圖片與圖片容器
接下來是設置圖片容器屬性以及圖片的基本大小。
圖片容器也採用絕對定位,寬度可以動態設置,根據圖片數量計算。每張圖片設置寬度與高度,得到的代碼如下。
圖片與圖片容器
-
圖片動畫效果
然後設置圖片的動畫效果,對於任意的圖片都有進入和靜止兩個狀態,中間的效果可以任意定製。
在這裡,中間效果設置成5%的間隔,其他時間在進行位置的切換,因為圖片是處於水平分佈,通過設置margin-left的值為負數進行偏移即可。
圖片動畫效果
-
數字索引的基本屬性
對於下麵的數字圖標也是通過基本的CSS屬性進行設置的,包括寬高,行高,透明度等等。
在滑鼠移動到對應的數字上後,數字會顯示不同的顏色。而且在滑鼠停留在數字上後,動畫效果會暫停。
數字索引基本屬性
-
數字索引的偏移量
因為數字是水平方向展示的,因此要設定每個數字的水平偏移量。
數字水平偏移量
-
滑鼠停在數字上的動畫效果
然後就是處理滑鼠停留在數字上的動畫效果,因為每張圖片對應特定的數字,需要計算出每次的動畫開始位置和結束位置。
滑鼠停在數字上的動畫效果
-
動畫效果賦予指定的數字
最後一步就是將定義的動畫效果賦予指定的數字上,每個數字都有特定的id。得到的代碼如下。
動畫效果賦予指定的數字
至此所有步驟完成了,就可以得到文章開始的動畫效果了。
結束語
這篇文章完全通過CSS實現了一個輪播圖的效果,相比於使用JS來說減少頁面阻塞程度,效果更好。
看完後你有過這樣的思考不?
-
為什麼這樣能實現?
-
能不能像js那樣迴圈播放?從第一個圖可以跳到最後一個圖後面
-
你是否掌握了這樣的思路?
web前端/H5/javascript學習群:250777811
歡迎關註此公眾號→【web前端EDU】跟大佬一起學前端!歡迎大家留言討論一起轉發