【css-task8】如何实现轮播图？

小课堂【北京第134期】

分享人:王振

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

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.参考文献

参考一：css3实现简单轮播图

参考二：bootstrap组件-carousel

参考三：你还在用轮播图吗

鸣谢

感谢大家观看

BY : 王振|肖浩宇