1.背景介紹
? ? ? ? 輪播圖，是由網頁banner進化而來，通常放在屏幕最顯眼的位置，以大圖顯示。隨著互聯網的發展，網頁中需要推廣的信息越來越多，宣傳信息都欲占據黃金位置，最后相互妥協，輪播圖應運而生。總而言之，輪播圖就是可以切換的一塊信息。
2.知識剖析
咱們先來看幾個例子：
http://www.bilibili.com/，http://music.163.com/，http://www.lxweimin.com/
由例可見，輪播圖一般由logo，底部指示器和左右切換按鍵組成。
3.常見問題
如何制作輪播圖？
4.解決方案
制作輪播圖的方法有兩種:css輪播或js輪播
1，css輪播。
流程圖解釋：
1，把input[type="radio"]的一組按鈕用設置相同name屬性的方向進行關聯，使得這組input可以切換。
2，用label標簽可單向綁定input，點擊label即可使相應的input被：checked。
3，多個label標簽可綁定同一個input，分別為左右切換按鈕和底部指示器設置一組label。
4，當input被：checked后，通過選擇器可控制圖片或label標簽的樣式。
5，input：nth-of-type（n）是選擇input的父元素的第n個input子元素。
6，input ~選擇input之后的兄弟元素。
2，js輪播。
在這里，咱們用bootstrap的組件carousel，carousel組件由js制作，使用時我們只需套模版就行，菜鳥教程上講的很詳細。http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-carousal-method
這里是一個demo：
5.編碼實戰
css輪播圖
1，html布局
設置了三組label標簽與input對應。
2，css部分
a，通過改變圖片容器ul的margin-left的方法來左右切換，圖片.img在其中左浮動，排成一行。
b.底部radio指示器隨input被：checked而改變。
c.input:checked后，圖片容器ul左移
d.input:checked后，左右切換按鈕對應的label被提升到最上方以供點擊，由于label綁定了input，可把句中的label替換成input。
故這句話也可理解為input：checked后，相對應的input按鈕被提升到最上方以供點擊。
然后被移至上方的input被：checked后，循環到了上一個代碼塊，圖片容器ul左移。
整個demo如下
6.擴展思考
1，如何實現淡入淡出切換？
img{
position:reletive; //把圖片定位以使用z-index屬性
z-index:1; ?//整體圖片設置一個較小的層級
transition:all.5s; //過渡實現淡入淡出
}
input:nth-of-type(n):checked~img:nth-of-type(n){
z-index:2; //選中的圖片放在圖片整體上方
}
2，如何實現自動輪播？
css自動輪播可用@keyframes動畫實現定時循環切換，但是css不能實現同時按鈕切換和自動輪播。
因為css不能判斷當前圖片自動輪播到的位置。故只能通過兩套系統來實現。以下是試圖融合的demo：
https://ptteng.github.io/PPT/demo/css-08-make%20carousel/carousel-sass/html/components/carousel.html
3，兩種實現方式的優缺點？
css輪播，適應性更廣，可以在用戶禁用js后仍然輪播，可以平穩退化。但不能同時自動輪播和點擊輪播。
js輪播，主流輪播方法。
4，如何設計輪播圖才能吸引用戶？
1.讓輪播圖看起來像是站點的一部分。
2.自動輪播缺點:切換頻繁，切換等待時間過長。在手機上不要用自動輪播，通過良好的設計讓用戶手動切換。
3.給予清晰的操作反饋和內容預期。
4.用輕量的圖片，復雜的大圖導致網站性能低，加載速度慢。
7.參考文獻
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設置為400%？
ul設置為400%即為body的400%，以容納寬度為body的100%的四張圖片。overflow部分被hidden。
PPT鏈接：make carousel
視頻鏈接：如何實現輪播圖
文本鏈接：實現輪播圖
