返回课程

轮播图

重要性:4

创建一个“轮播图” - 一条可以通过点击箭头滚动的图像带。

稍后我们可以添加更多功能:无限滚动、动态加载等。

附注:对于此任务,HTML/CSS 结构实际上是解决方案的 90%。

打开任务沙箱。

图像带可以用 ul/li 列表表示,其中包含图像 <img>

通常,这样的带很宽,但我们围绕它放置一个固定大小的 <div> 来“剪切”它,以便只有一部分带可见。

为了使列表水平显示,我们需要为 <li> 应用正确的 CSS 属性,例如 display: inline-block

对于 <img>,我们也应该调整 display,因为默认情况下它是 inline。在 inline 元素下保留了额外的空间用于“字母尾部”,因此我们可以使用 display:block 来删除它。

为了实现滚动效果,我们可以移动<ul>。有很多方法可以做到,例如改变margin-left或(性能更好)使用transform: translateX()

外部<div>具有固定宽度,因此“多余”的图像会被裁剪。

整个轮播图是页面上一个独立的“图形组件”,因此最好将其包裹在一个单独的<div class="carousel">中,并在其中进行样式设置。

在沙盒中打开解决方案。