1.背景介紹
? ? ? ? 輪播圖妖异，是由網(wǎng)頁banner進(jìn)化而來，通常放在屏幕最顯眼的位置领追，以大圖顯示他膳。隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)頁中需要推廣的信息越來越多蔓腐，宣傳信息都欲占據(jù)黃金位置矩乐，最后相互妥協(xié)，輪播圖應(yīng)運(yùn)而生回论∩⒑保總而言之，輪播圖就是可以切換的一塊信息傀蓉。
2.知識剖析
咱們先來看幾個(gè)例子：
http://www.bilibili.com/欧漱，http://music.163.com/，http://www.reibang.com/
由例可見葬燎，輪播圖一般由logo误甚，底部指示器和左右切換按鍵組成。
3.常見問題
如何制作輪播圖谱净？
4.解決方案
制作輪播圖的方法有兩種:css輪播或js輪播
1窑邦，css輪播。
流程圖解釋：
1壕探，把input[type="radio"]的一組按鈕用設(shè)置相同name屬性的方向進(jìn)行關(guān)聯(lián)冈钦，使得這組input可以切換。
2李请，用label標(biāo)簽可單向綁定input瞧筛，點(diǎn)擊label即可使相應(yīng)的input被：checked。
3导盅，多個(gè)label標(biāo)簽可綁定同一個(gè)input较幌，分別為左右切換按鈕和底部指示器設(shè)置一組label。
4白翻，當(dāng)input被：checked后乍炉，通過選擇器可控制圖片或label標(biāo)簽的樣式。
5滤馍，input：nth-of-type（n）是選擇input的父元素的第n個(gè)input子元素恩急。
6，input ~選擇input之后的兄弟元素纪蜒。
2，js輪播此叠。
在這里纯续，咱們用bootstrap的組件carousel随珠，carousel組件由js制作，使用時(shí)我們只需套模版就行猬错，菜鳥教程上講的很詳細(xì)窗看。http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-carousal-method
這里是一個(gè)demo：
5.編碼實(shí)戰(zhàn)
css輪播圖
1，html布局
設(shè)置了三組label標(biāo)簽與input對應(yīng)倦炒。
2显沈，css部分
a，通過改變圖片容器ul的margin-left的方法來左右切換逢唤，圖片.img在其中左浮動(dòng)拉讯，排成一行。
b.底部radio指示器隨input被：checked而改變鳖藕。
c.input:checked后魔慷，圖片容器ul左移
d.input:checked后，左右切換按鈕對應(yīng)的label被提升到最上方以供點(diǎn)擊著恩，由于label綁定了input院尔，可把句中的label替換成input。
故這句話也可理解為input：checked后喉誊，相對應(yīng)的input按鈕被提升到最上方以供點(diǎn)擊邀摆。
然后被移至上方的input被：checked后，循環(huán)到了上一個(gè)代碼塊伍茄，圖片容器ul左移栋盹。
整個(gè)demo如下
6.擴(kuò)展思考
1，如何實(shí)現(xiàn)淡入淡出切換幻林？
img{
position:reletive; //把圖片定位以使用z-index屬性
z-index:1; ?//整體圖片設(shè)置一個(gè)較小的層級
transition:all.5s; //過渡實(shí)現(xiàn)淡入淡出
}
input:nth-of-type(n):checked~img:nth-of-type(n){
z-index:2; //選中的圖片放在圖片整體上方
}
2贞盯，如何實(shí)現(xiàn)自動(dòng)輪播？
css自動(dòng)輪播可用@keyframes動(dòng)畫實(shí)現(xiàn)定時(shí)循環(huán)切換沪饺，但是css不能實(shí)現(xiàn)同時(shí)按鈕切換和自動(dòng)輪播躏敢。
因?yàn)閏ss不能判斷當(dāng)前圖片自動(dòng)輪播到的位置。故只能通過兩套系統(tǒng)來實(shí)現(xiàn)整葡。以下是試圖融合的demo：
https://ptteng.github.io/PPT/demo/css-08-make%20carousel/carousel-sass/html/components/carousel.html
3件余，兩種實(shí)現(xiàn)方式的優(yōu)缺點(diǎn)？
css輪播遭居，適應(yīng)性更廣啼器，可以在用戶禁用js后仍然輪播，可以平穩(wěn)退化俱萍。但不能同時(shí)自動(dòng)輪播和點(diǎn)擊輪播端壳。
js輪播，主流輪播方法枪蘑。
4损谦，如何設(shè)計(jì)輪播圖才能吸引用戶岖免？
1.讓輪播圖看起來像是站點(diǎn)的一部分。
2.自動(dòng)輪播缺點(diǎn):切換頻繁照捡，切換等待時(shí)間過長颅湘。在手機(jī)上不要用自動(dòng)輪播，通過良好的設(shè)計(jì)讓用戶手動(dòng)切換栗精。
3.給予清晰的操作反饋和內(nèi)容預(yù)期闯参。
4.用輕量的圖片，復(fù)雜的大圖導(dǎo)致網(wǎng)站性能低悲立，加載速度慢鹿寨。
7.參考文獻(xiàn)
1，You-Dont-Need-JavaScript
https://github.com/you-dont-need/You-Dont-Need-JavaScript
2级历，bootstrap組件-carousel
http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-carousal-method
3释移，你還在用輪播圖嗎
https://isux.tencent.com/carousels.html
8.更多討論
1，為何ul設(shè)置為400%寥殖？
ul設(shè)置為400%即為body的400%玩讳，以容納寬度為body的100%的四張圖片。overflow部分被hidden嚼贡。
PPT鏈接：make carousel
視頻鏈接：如何實(shí)現(xiàn)輪播圖
文本鏈接：實(shí)現(xiàn)輪播圖
