1.背景介紹
輪播圖，是由網(wǎng)頁banner進(jìn)化而來，通常放在屏幕最顯眼的位置，以大圖顯示。隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)頁中需要推廣的信息越來越多，宣傳信息都欲占據(jù)黃金位置，最后相互妥協(xié)，輪播圖應(yīng)運(yùn)而生?？偠灾?，輪播圖就是可以切換的一塊信息。
2.知識剖析
咱們先來看幾個例子：
http://www.bilibili.com/，http://music.163.com/，http://www.itdecent.cn/
由例可見，輪播圖一般由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，多個label標(biāo)簽可綁定同一個input，分別為左右切換按鈕和底部指示器設(shè)置一組label。
4，當(dāng)input被：checked后，通過選擇器可控制圖片或label標(biāo)簽的樣式。
5，input：nth-of-type（n）是選擇input的父元素的第n個input子元素。
6，input ~選擇input之后的兄弟元素。
2，js輪播。
在這里，咱們用bootstrap的組件carousel，carousel組件由js制作，使用時我們只需套模版就行，菜鳥教程上講的很詳細(xì)。http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-carousal-method
這里是一個demo：
5.編碼實戰(zhàn)
css輪播圖
1，html布局
2，css部分
a，通過改變圖片容器ul的margin-left的方法來左右切換，圖片.img在其中左浮動，排成一行。
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)到了上一個代碼塊，圖片容器ul左移。
整個demo如下
6.擴(kuò)展思考
1，如何實現(xiàn)淡入淡出切換？
img{
position:reletive; //把圖片定位以使用z-index屬性
z-index:1; ?//整體圖片設(shè)置一個較小的層級
transition:all.5s; //過渡實現(xiàn)淡入淡出
}
input:nth-of-type(n):checked~img:nth-of-type(n){
z-index:2; //選中的圖片放在圖片整體上方
}
2，如何實現(xiàn)自動輪播？
css自動輪播可用@keyframes動畫實現(xiàn)定時循環(huán)切換，但是css不能實現(xiàn)同時按鈕切換和自動輪播。
因為css不能判斷當(dāng)前圖片自動輪播到的位置。故只能通過兩套系統(tǒng)來實現(xiàn)。以下是試圖融合的demo：
https://ptteng.github.io/PPT/demo/css-08-make%20carousel/carousel-sass/html/components/carousel.html
3，兩種實現(xiàn)方式的優(yōu)缺點(diǎn)？
css輪播，適應(yīng)性更廣，可以在用戶禁用js后仍然輪播，可以平穩(wěn)退化。但不能同時自動輪播和點(diǎn)擊輪播。
js輪播，主流輪播方法。
4，如何設(shè)計輪播圖才能吸引用戶？
1.讓輪播圖看起來像是站點(diǎn)的一部分。
2.自動輪播缺點(diǎn):切換頻繁，切換等待時間過長。在手機(jī)上不要用自動輪播，通過良好的設(shè)計讓用戶手動切換。
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，你還在用輪播圖嗎 ?
