1.背景介绍
轮播图，是由网页banner进化而来，通常放在屏幕最显眼的位置，以大图显示。随着网页中需要推广的信息越来越多，为了相互妥协，轮播图应运而生。简而言之，轮播图就是可以滚动播放的文字和图片。
2.知识剖析
示例：葡萄藤官网
由例可见，轮播图一般由logo图片，底部指示器和左右切换按键组成。
3.常见问题
如何制作轮播图
4.解决方案
css阶段所需要理解的两种实现方法：css实现轮播图和bootstrap轮播图插件
css轮播
轮播图主要思路：将n张图片左浮动横向并排放入一个div容器（#photos）内，图片设置统一尺寸，div宽度设置n个图片的总尺寸，然后放入相框容器div（#frame），相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。然后使用CSS3动画，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。
5.编码实战
6.扩展思考
一.css如何实现单击切换图片
二.两种实现方式的优缺点
css轮播，适应性更广，可以在用户禁用js后仍然轮播，平稳退化，但实现完整效果时代码较为复杂。
bootstrap轮播，代码简洁，复用性高。
三.如何设计轮播图才能吸引到用户
1.让轮播图看起来像是站点的一部分
2.自动轮播缺点:切换频繁，切换等待时间过长。在手机上不要用自动轮播，通过良好的设计让用户手动切换。
3.给予清晰的操作反馈和内容预期
4.用轻量的图片，复杂的大图导致网站性能低，加载速度慢
7.参考文献
参考一：CSS实现简单轮播图
参考三：你还在用轮播图吗
