1.背景介紹
輪播圖，是由網(wǎng)頁banner進化而來，通常放在屏幕最顯眼的位置，以大圖顯示。隨著網(wǎng)頁中需要推廣的信息越來越多，為了相互妥協(xié)，輪播圖應運而生。簡而言之，輪播圖就是可以滾動播放的文字和圖片。
2.知識剖析
示例：葡萄藤官網(wǎng)
由例可見，輪播圖一般由logo圖片，底部指示器和左右切換按鍵組成。
3.常見問題
如何制作輪播圖
4.解決方案
css階段所需要理解的兩種實現(xiàn)方法：css實現(xiàn)輪播圖和bootstrap輪播圖插件
css輪播
輪播圖主要思路：將n張圖片左浮動橫向并排放入一個div容器（#photos）內(nèi)，圖片設置統(tǒng)一尺寸，div寬度設置n個圖片的總尺寸，然后放入相框容器div（#frame），相框設置1個圖片的大小并設置溢出隱藏，以保證正確顯示一個照片。然后使用CSS3動畫，通過對photos進行位移，從而達到顯示不同的圖片，每次偏移一個圖片的寬度，即可顯示下一張圖片。
5.編碼實戰(zhàn)
6.擴展思考
一.css如何實現(xiàn)單擊切換圖片
二.兩種實現(xiàn)方式的優(yōu)缺點
css輪播，適應性更廣，可以在用戶禁用js后仍然輪播，平穩(wěn)退化，但實現(xiàn)完整效果時代碼較為復雜。
bootstrap輪播，代碼簡潔，復用性高。
三.如何設計輪播圖才能吸引到用戶
1.讓輪播圖看起來像是站點的一部分
2.自動輪播缺點:切換頻繁，切換等待時間過長。在手機上不要用自動輪播，通過良好的設計讓用戶手動切換。
3.給予清晰的操作反饋和內(nèi)容預期
4.用輕量的圖片，復雜的大圖導致網(wǎng)站性能低，加載速度慢
7.參考文獻
參考一：CSS實現(xiàn)簡單輪播圖
參考三：你還在用輪播圖嗎
