您好,登錄后才能下訂單哦!
這篇文章給大家分享的是css輪播圖的制作步驟,相信大部分人都還沒學會這個技能,為了讓大家更加了解,給大家總結(jié)了以下內(nèi)容,話不多說,一起往下看吧。
基本需求分析
由于css無法做到j(luò)s一樣的精準操控,所有某些效果是無法實現(xiàn)的,比如在輪播的同時支持用戶左右滑動,所以使用css智能實現(xiàn)基本的效果。下面列出來的內(nèi)容就是我們實現(xiàn)的:
1、在固定區(qū)域中,內(nèi)部內(nèi)容自行滑動切換形成播放的效果
2、當切換到最后一張內(nèi)容時,會反向播放或者回到起點重播
3、每張內(nèi)容會停留一段時間,讓用戶能夠看清楚
4、內(nèi)容可以點擊/進行操作
dom結(jié)構(gòu)搭建
首先要有一個容器作為輪播圖的容器,同時由于要實現(xiàn)滑動切換,所以內(nèi)部需要有一個裝載所有待切換內(nèi)容的子容器
如果子容器中的內(nèi)容是左右切換的,則需要將內(nèi)容左右排列開
下面以輪播圖片為例,上代碼
<div class="loop-wrap"> <div class="loop-images-container"> <img src="darksky.jpg" alt="" class="loop-image"> <img src="starsky.jpg" alt="" class="loop-image"> <img src="whiteland.jpg" alt="" class="loop-image"> <img src="darksky.jpg" alt="" class="loop-image"> <img src="starsky.jpg" alt="" class="loop-image"> </div> </div>
.loop-wrap
是主容器
.loop-images-container
是承載內(nèi)部圖片的子容器
.loop-image
是圖片內(nèi)容,如果需要顯示其他內(nèi)容,可以自定義
css實現(xiàn)靜態(tài)效果
輪播圖內(nèi)每一頁內(nèi)容的寬高應該相同,且等于主容器.loop-wrap
寬高
.loop-images-container
的寬高必然有一個大于外部主容器,overflow
屬性應該設(shè)置為hidden
。那為什么不設(shè)置為auto
呢?我不告訴你,你可以自己試試看。
.loop-wrap { position: relative; width: 500px; height: 300px; margin: 100px auto; overflow: hidden; } .loop-images-container{ position: absolute; left: 0; top: 0; width: 500%; /* 橫向排列 5張圖片 寬度應為主容器5倍 */ height: 100%; font-size: 0; } .loop-image{ width: 500px; height: 300px; }
下面在瀏覽器中打開頁面,就可以看到不帶輪播效果的靜態(tài)頁面了,除了第一張圖片,其他圖片都不可見
css實現(xiàn)輪播效果
輪播效果說到底就是一個動畫效果,而通過css3的新屬性 animation
我們就可以自定義一個動畫來達到輪播圖效果。下面先來了解一下 animation
這個屬性
/* animation: name duration timing-function delay iteration-count direction name: 動畫名 duration: 動畫持續(xù)時間 設(shè)置為0則不執(zhí)行 timing-function:動畫速度曲線 delay:動畫延遲開始時間 設(shè)置為0則不延遲 iteration-count:動畫循環(huán)次數(shù) 設(shè)置為infinite則無限次循環(huán) direction:是否應該輪流反向播放動畫 normal 否 alternate 是 */
animation
的 name
值是動畫名,動畫名可以通過 @keyframes
創(chuàng)建自定義動畫規(guī)則
分析動畫
要實現(xiàn)輪播,本質(zhì)上是使內(nèi)部承載內(nèi)容的子容器 .loop-images-container
進行位移,從而使不同位置的內(nèi)容一次展示在用戶眼前
共有五張圖片需要展示,如果輪播總耗時10s,那么每張圖片應該有2s的時間(20%),而每張圖片耗時的構(gòu)成是切換耗時+展示耗時,如果切換耗時500ms(5%),展示耗時就應該是1500ms(15%)
于是這樣改造css
.loop-images-container{ position: absolute; left: 0; top: 0; width: 500%; height: 100%; font-size: 0; transform: translate(0,0); /* 初始位置位移 */ animation: loop 10s linear infinite; } /* 創(chuàng)建loop動畫規(guī)則 */ /* 輪播5張,總耗時10s,單張應為2s(20%) 單張切換動畫耗時500ms,停留1500ms */ @keyframes loop { 0% {transform: translate(0,0);} 15% {transform: translate(0,0);} /* 停留1500ms */ 20% {transform: translate(-20%,0);} /* 切換500ms 位移-20% */ 35% {transform: translate(-20%,0);} 40% {transform: translate(-40%,0);} 55% {transform: translate(-40%,0);} 60% {transform: translate(-60%,0);} 75% {transform: translate(-60%,0);} 80% {transform: translate(-80%,0);} 95% {transform: translate(-80%,0);} 100% {transform: translate(0,0);} /* 復位到第一張圖片 */ }
純css實現(xiàn)輪播圖效果完成
這是一個方向的輪播效果,想要實現(xiàn)往返方向的輪播效果,小伙伴們可以試試direction
的alternate
,但是自定義動畫規(guī)則的時間間隔也要重新計算了哦!
關(guān)于css輪播圖的制作就分享到這里了,解決問題并不止文章中和大家分析的辦法,不過本文分析的方法準確性是不容置疑的。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。