效果GIF图：
第一步 ul 中的css设置 <ul id = "list"></ul>
#list { overflow-x: auto//设置x轴可滑动 list-style: none//去掉li上的小点 white-space:nowrap//元素不换行 width: auto(宽度) }
第二步 li中的css设置 <li class = "item">
.item { margin-left: 20px//每个li设置间距为20px display: inline-block//让所有的li在一行 注意这里不能用float:left 因为设置float后里超过一屏后会自动换行 }
先介绍一下上面的重要的css中的属性作用，大家也可以去w3scholl去参考学习。
这只是在x轴上的滑动 有一个相对的是overflow-y 只在y轴上滑动
width是我们最常用的属性，但是我常用的为lenght和% 忽略了auto这个属性 我们大可不惜自己去计算宽度，使用auto可以自适应宽度。
使用用flex-box布局
#list { displey:-webkit-flexdisplay: flex-webkit-flex-flow:row nowrap//设置排列方式为横向排列，并且超出元素不换行 flex-flow:row nowrapoverflow-x: autolist-style: none}
简单demo：使用HTML+CSS 实现轮播图（三张图为例，分别为：红、绿、蓝）的效果。
不能发视频，截图来代替吧
1.显示 轮播图1（实际轮播的第2个元素li）
2.显示 轮播图2（实际轮播的第3个元素li）
3.显示 轮播图3（实际轮播的第4个元素li）
4.显示 轮播图1（实际轮播的第5个元素li,之后会紧跟着重复以上动作）
