分享人:田迪生
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
轮播图，是由网页横幅图片banner进化而来，通常放在屏幕最显眼的位置，以大图显示。随着网页中需要推广的信息越来越多，为了相互妥协，轮播图应运而生。简而言之，轮播图就是可以滚动播放的文字和图片。
轮播图一般由logo图片，底部指示器和左右切换按键组成。
示例：葡萄藤官网首页
如何制作轮播图
css阶段所需要理解的两种实现方法：
一、css实现轮播图
二、bootstrap轮播图插件
大致思路：
1.确定图片的切换方式，使用绝对定位，令三张图片重叠在一起，通过z-index的变化来切换图片。
2、模拟左右切换按键，利用单选框的伪类：checked来模拟点击事件。
3、模拟底部指示器，自定义单选框的样式，使用label标签和伪元素来更改单选框选中时的样式。
一.两种实现方式的优缺点
css轮播，适应性更广，可以在用户禁用js后仍然轮播，平稳退化，但实现完整效果时代码较为复杂。
bootstrap轮播，代码简洁，复用性高。
二.如何设计轮播图才能吸引到用户
1.让轮播图看起来像是站点的一部分
2.自动轮播缺点:切换频繁，切换等待时间过长。在手机上不要用自动轮播，通过良好的设计让用户手动切换。
3.给予清晰的操作反馈和内容预期
4.用轻量的图片，复杂的大图导致网站性能低，加载速度慢
参考一：纯css实现轮播图
感谢大家观看