整合營銷服務商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          純CSS實現(xiàn)輪播圖效果,你不知道的CSS3黑科技


          輪播圖已經(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)查一下,最后,我把圖片放進去,做出真正的輪播圖吧。

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

          主站蜘蛛池模板: 久久无码人妻一区二区三区午夜| 最新欧美精品一区二区三区| 久久久91精品国产一区二区三区| 亚洲一区二区三区久久| 小泽玛丽无码视频一区| 91一区二区在线观看精品| 极品少妇一区二区三区四区| 国产精品分类视频分类一区| 亚洲AV无码一区二三区| 无码一区二区三区免费视频| 无码人妻一区二区三区在线视频| 一区二区不卡久久精品| 国内精品视频一区二区三区| 久久无码AV一区二区三区| 综合久久久久久中文字幕亚洲国产国产综合一区首 | 亚洲国产精品乱码一区二区| 麻豆一区二区三区蜜桃免费| 亚洲国产欧美一区二区三区| 精品一区二区三区东京热| 亚洲一区二区三区在线观看网站| 国产精品无码亚洲一区二区三区| 久久精品国产一区二区三区肥胖 | 日韩AV在线不卡一区二区三区 | 日韩精品一区二区三区不卡| 国产精品成人一区无码| 天天综合色一区二区三区| 国内精品视频一区二区三区| 国产精品一区二区四区| 精彩视频一区二区三区 | 久久综合亚洲色一区二区三区| 少妇无码一区二区二三区| 人妻天天爽夜夜爽一区二区| 亚洲一区二区三区久久久久| 亚洲日韩精品国产一区二区三区| 亚洲色精品三区二区一区| 国产精品资源一区二区| 一区二区三区视频免费| 国产一区二区三区免费观看在线 | 中文人妻无码一区二区三区| 亚洲一区二区三区香蕉| 91精品一区二区三区久久久久|