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