带你手写一个轮播图之HTML结构和CSS布局设计

zhezhongyun 2024-12-26 17:42 74 浏览

在前端项目开发中，大家可能多少都有用到过轮播图。一般为了省事，我们会使用现成的库，比如swiper。当然，很多组件库也带有轮播图组件，比如element-ui的ElCarousel组件。但是，有多少童鞋曾思考过其实现原理呢？又有多少童鞋尝试过手写一个呢？

其实，实现一个轮播图相当简单，我打算出一个大约3节的连载教程，教大家怎样一步一步实现轮播图。今天，我们先讲解结构和布局的设计。

首先，我们创建一个项目文件夹carousel-demo，在该目录下新建images文件夹和index.html，main.js，style.css三个文件。然后，大家找3张相同尺寸的banner图和2个相同尺寸的小图标放入images文件夹。我用的banner图尺寸是1280*720，文件名分别是1.jpg，2.jpg，3.jpg；我用的图标尺寸是32*32，文件名分别是left.png和right.png。

最终，我们实现的轮播图界面长这样，大家说漂不漂亮？

接下来，我们打开index.html文件，先创建一个基本的骨架，并引入我们刚才创建的css和js文件，代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Carousel demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

我们的轮播图需要一个外层容器元素，该元素包含一个banner列表，一个指示器和一组左右导航按钮。由于默认显示第一张图片，所以我们给第一个指示器项添加了一个active类。代码如下：

  <div class="carousel-wrapper">
    <ul class="slides">
      <li class="slide-item">
        <img src="images/1.jpg">
      </li>
      <li class="slide-item">
        <img src="images/2.jpg">
      </li>
      <li class="slide-item">
        <img src="images/3.jpg">
      </li>
    </ul>
    <ul class="indicators">
      <li class="indicator-item active"></li>
      <li class="indicator-item"></li>
      <li class="indicator-item"></li>
    </ul>
    <ul class="nav">
      <li class="nav-left"></li>
      <li class="nav-right"></li>
    </ul>
  </div>

现在，我们打开style.css文件，首先对默认样式做一些重置，将所有元素的内外边距设为0，盒模型设为边框盒。为了去掉li元素前面的小圆点，我们将li元素的list-style设为none。样式如下：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

接下来，我们从外到内，从上到下为元素定义样式。

首先，我们定义外层容器元素的样式。为了使布局更灵活，我们先给它指定一个最大宽度，并让其在水平方向居中。由于它的子元素需要堆叠，我们给它设置相对定位，让子元素相对于它来定位。由于我们的banner列表有多张图片，可以左右滚动，每次仅一张图片可见，所以需要将不可见的图片裁掉。样式如下：

.carousel-wrapper {
  max-width: 800px;
  margin: auto;
  position: relative;
  overflow: hidden;
}

接下来，我们定义banner列表和其子元素样式。我们的banner列表有3张图片，可以左右滚动，每次仅显示一张，所以banner的宽度与容器一样，banner列表宽度是容器的3倍。

我们将banner列表元素显示为弹性盒，以让所有banner在一行排列显示。由于弹性盒子元素会均分空间，而我们的banner图宽度相同，所以不需要设置banner的宽度，仅将banner内的img元素宽度设为100%即可。

我们也为banner列表添加了过渡属性，当使用JS动态改变变换值的时候会有动画效果。样式如下：

.slides {
  width: 300%;
  display: flex;
  transition: transform .3s;
}

.slide-item img {
  display: block;
  width: 100%;
}

下面，我们定义指示器样式。我们的指示器需要在banner列表上层底部居中显示，我们使用left和X轴平移变换结合实现水平居中，全部样式如下：

.indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; // 弹性盒，让子元素在一行显示
  padding: 5px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, .3);
  pointer-events: none; // 阻止指示器容器成为指针事件目标
}

.indicator-item {
  pointer-events: all; // 让指示器子元素可以成为指针事件目标
  cursor: pointer; 
  width: 30px;
  height: 6px;
  margin: 0 4px;
  border-radius: 6px;
  background-color: #999;
}

.indicator-item.active { // 为活动指示器项设置一个不同的样式
  background-color: #ccc;
}

最后，我们定义导航按钮样式。我们的导航按钮需要在banner列表上层两边垂直方向居中显示，我们使用top和Y轴平移变换结合实现垂直居中，全部样式如下：

.nav li {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, .3);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}

.nav-left {
  left: 0;
  background-image: url(images/left.png);
}

.nav-right {
  right: 0;
  background-image: url(images/right.png);
}

以上就是本文的全部内容了，童鞋们都理解了吗？还有什么不懂的欢迎评论区提问，感谢阅读！

HTML滚动条样式

上一篇：七爪源码:纯 CSS 和 JS 的原生平滑滚动
下一篇：Axure教程:实现移动端页面上下滑动效果

带你手写一个轮播图之HTML结构和CSS布局设计

相关推荐

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

在SpringBoot+Vue3项目中通过Nginx代理WebSocket实现跨域通信

利用webSocket实现消息的实时推送

谈谈websocket跨域

前端开发规范(一、HTML篇)

html5 工业web组态-开发自定义的组件 (炫酷按钮)

Python每日一库之Beautiful Soup（python mtime）