轮播图
重要程度: 4
创建一个“轮播图（carousel）” —— 一条可以通过点击箭头来滚动图像的图像带。
之后，我们可以为其添加更多功能：无限滚动，动态加载等。
P.S. 对于这个任务，HTML/CSS 结构实际上占解决方案的 90%。
图像带可以表示为图像 <img> 的 ul/li 列表。
通常，这样的图像带是很宽的，但我们在其周围放置了一个固定大小的 <div> 来“剪切”它，因此，只有图像带的一部分是可见的：
为了使列表水平显示，我们需要为 <li> 应用正确的 CSS 属性，例如 display: inline-block。
对于 <img> 来说，我们应该调整 display，因为默认情况下它是 inline。在 inline 元素下方为 “letter tails” 保留了额外的空间，因此，我们可以使用 display:block 来将其删除。
我们可以移动 <ul> 来进行滚动。有很多方法可以实现这一点，例如，通过修改 margin-left 或者使用 transform: translateX()（性能更好）：
外部的 <div> 具有固定的宽度，因此，会裁剪掉“多余”的图像。
整个轮播图是页面上的一个独立的“图形组件”，因此我们最好将其包装到一个单独的 <div class="carousel"> 中，并在其中对其进行样式设置。