如何实现轮播图？

分享人:陈皓宇

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

轮播图，是由网页横幅图片banner进化而来，通常放在屏幕最显眼的位置，以大图显示。随着网页中需要推广的信息越来越多，为了相互妥协，轮播图应运而生。简而言之，轮播图就是可以滚动播放的文字和图片。

2.知识剖析

轮播图一般由logo图片，底部指示器和左右切换按键组成。

示例：葡萄藤官网首页

3.常见问题

如何制作轮播图

4.解决方案

css阶段所需要理解的两种实现方法：

一、bootstrap轮播图插件

二、css实现轮播图（自动轮播/手动轮播）

bootstrap插件实现轮播图

css实现轮播图

大致思路：

利用单选框的伪类：checked来模拟点击事件，绑定图片的容器进行伪动画。

5.编码实战

css轮播

写demo去吧~~

6.扩展思考

一.两种实现方式的优缺点

1、css轮播，适应性更广，可以在用户禁用js后仍然轮播，平稳退化，但实现完整效果时代码较为复杂。但是，令人可惜的是自动轮播和手动轮播无法共存呐~~

2、bootstrap轮播，代码简洁，复用性高。

二、关于父级选择器

刚刚有用到兄弟选择器“~”。但是，CSS有没有父级选择器？ 关于父级选择器

一个关于CSS3的有趣的github

7.参考文献

参考一：纯css实现轮播图

参考二：bootstrap组件-carousel

鸣谢

感谢大家观看