1.背景介绍

        轮播图，是由网页banner进化而来，通常放在屏幕最显眼的位置，以大图显示。随着互联网的发展，网页中需要推广的信息越来越多，宣传信息都欲占据黄金位置，最后相互妥协，轮播图应运而生。总而言之，轮播图就是可以切换的一块信息。

2.知识剖析

咱们先来看几个例子：

http://www.bilibili.com/，http://music.163.com/，http://www.jianshu.com/

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

3.常见问题

如何制作轮播图？

4.解决方案

制作轮播图的方法有两种:css轮播或js轮播

1，css轮播。

css轮播流程

流程图解释：

1，把input[type="radio"]的一组按钮用设置相同name属性的方向进行关联，使得这组input可以切换。

2，用label标签可单向绑定input，点击label即可使相应的input被：checked。

3，多个label标签可绑定同一个input，分别为左右切换按钮和底部指示器设置一组label。

4，当input被：checked后，通过选择器可控制图片或label标签的样式。

5，input：nth-of-type（n）是选择input的父元素的第n个input子元素。

6，input ~选择input之后的兄弟元素。

2，js轮播。

在这里，咱们用bootstrap的组件carousel，carousel组件由js制作，使用时我们只需套模版就行，菜鸟教程上讲的很详细。http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-carousal-method

这里是一个demo：

bootstrap-carousel-demo

5.编码实战

css轮播图

1，html布局

html布局

设置了三组label标签与input对应。

2，css部分

a，通过改变图片容器ul的margin-left的方法来左右切换，图片.img在其中左浮动，排成一行。

b.底部radio指示器随input被：checked而改变。

c.input:checked后，图片容器ul左移

d.input:checked后，左右切换按钮对应的label被提升到最上方以供点击，由于label绑定了input，可把句中的label替换成input。

故这句话也可理解为input：checked后，相对应的input按钮被提升到最上方以供点击。

然后被移至上方的input被：checked后，循环到了上一个代码块，图片容器ul左移。

整个demo如下

css-carousel

6.扩展思考

1，如何实现淡入淡出切换？

img{

position:reletive; //把图片定位以使用z-index属性

z-index:1;  //整体图片设置一个较小的层级

transition:all.5s; //过渡实现淡入淡出

}

input:nth-of-type(n):checked~img:nth-of-type(n){

z-index:2; //选中的图片放在图片整体上方

}

2，如何实现自动轮播？

css自动轮播可用@keyframes动画实现定时循环切换，但是css不能实现同时按钮切换和自动轮播。

因为css不能判断当前图片自动轮播到的位置。故只能通过两套系统来实现。以下是试图融合的demo：

https://ptteng.github.io/PPT/demo/css-08-make%20carousel/carousel-sass/html/components/carousel.html

3，两种实现方式的优缺点？

css轮播，适应性更广，可以在用户禁用js后仍然轮播，可以平稳退化。但不能同时自动轮播和点击轮播。

js轮播，主流轮播方法。

4，如何设计轮播图才能吸引用户？

1.让轮播图看起来像是站点的一部分。

2.自动轮播缺点:切换频繁，切换等待时间过长。在手机上不要用自动轮播，通过良好的设计让用户手动切换。

3.给予清晰的操作反馈和内容预期。

4.用轻量的图片，复杂的大图导致网站性能低，加载速度慢。

7.参考文献

1，You-Dont-Need-JavaScript

https://github.com/you-dont-need/You-Dont-Need-JavaScript

2，bootstrap组件-carousel

http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-carousal-method

3，你还在用轮播图吗

https://isux.tencent.com/carousels.html

8.更多讨论

1，为何ul设置为400%？

ul设置为400%即为body的400%，以容纳宽度为body的100%的四张图片。overflow部分被hidden。

PPT链接：make carousel

视频链接：如何实现轮播图

文本链接：实现轮播图