淘宝轮播图尺寸（淘宝轮播图尺寸是多少）

投稿用户 • 2023年 4月 7日 15:47:10 • 资质办理 • 阅读 24

在前端项目开发中，大家可能多少都有用到过轮播图。一般为了省事，我们会使用现成的库，比如swiper。当然，很多组件库也带有轮播图组件，比如element-ui的ElCarousel组件。但是，有多少童鞋曾思考过其实现原理呢？又有多少童鞋尝试过手写一个呢？其实，实现一个轮播图相当简单，我打算出一个大约3节的连载教程，教大家怎样一步一步实现轮播图。今天，我们先讲解结构和布局的设计。首先，我

在前端项目开发中，大家可能多少都有用到过轮播图。一般为了省事，我们会使用现成的库，比如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);
}

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

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 1553299181@qq.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.lmux.cn/21684.html

投稿用户

0 0

商标注册素材一个字（商标注册素材一个字多少钱）

上一篇 2023年 4月 7日 15:42:58

普罗塔哥拉的主要观点（普罗塔哥拉主要观点评价）

下一篇 2023年 4月 7日 15:50:13

口红的制作材料，口红的制作方法及配方比例

老铁们，大家好，相信还有很多朋友对于口红的制作材料和口红的制作方法及配方比例的相关问题不太懂，没关系，今天就由我来为大家分享分享口红的制作材料以及口红的制作方法及配方比例的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！本文目录DIY口红需要什么材料口红的制作方法及配方比例自制口红需要那些材料DIY口

投稿用户
资质办理 2023年 9月 28日
4 0
化太岁什么意思化太岁啥意思

大家好,今天小编来为大家解答以下的问题，关于化太岁什么意思，化太岁啥意思这个很多人还不知道，现在让我们一起来看看吧！本文目录去寺庙拜香，化太岁需要注意什么什么是化太岁成都哪能拜太岁自己能化太岁吗化太岁啥意思去寺

投稿用户
资质办理 2023年 8月 29日
1 0
当老师app 你觉得哪些软件或app用得好

各位老铁们，大家好，今天由我来为大家分享当老师app，以及作为一个化学老师，你觉得哪些软件或app用得好的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！本文目录中医app哪个好哪个比较

投稿用户
资质办理 2023年 10月 27日
6 0
资质办理

2022必火的服装店名（怎么查店名有没有被注册）

晏平起名，公司起名，有特色的女装店铺取名大全现在开店的人越来越多，一个生意好有特色的店名有利于消费者的记忆，自然而然就会对这家店铺产生好感，起名字要用十字吉祥，给人美感。那么有特色的店名有哪些讲究？用一些符合中国人

投稿用户
2023年 2月 3日
0 0
资质办理

什么是螨虫(什么是螨虫脸)

螨虫是什么东西？螨虫是一种肉眼不易看见的微型害虫，种类很多。至今前发现在居室内生活的螨虫有40余种，其中与人体健康有关的有十多种。最常见的有尘螨、粉螨、蠕螨、疥螨等。调查表明，成…

投稿用户
2022年 9月 18日
45 0
生产成本分录，生产成本怎么记账

本篇文章给大家谈谈生产成本分录，以及生产成本怎么记账对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。本文目录生产产品领用材料30000元，做会计分录时，为什么生产成本是借方，原材料是贷方生产成本怎么记账借生产成本贷原材料的会计分录应填制产品完工验收入

投稿用户
资质办理 2023年 11月 10日
12 0
启示的意思(启示的意思是什么)

各位老铁们，大家好，今天由我来为大家分享启示的意思，以及启示的意思是什么的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！通知与启示有什么区别通知，是运用广泛的知照性公文。用来发布法规、规章，转发上级机关、同级机

投稿用户
资质办理 2023年 8月 30日
4 0
平方的符号，平方代号怎么写

大家好，今天小编来为大家解答平方的符号这个问题，平方代号怎么写很多人还不知道，现在让我们一起来看看吧！本文目录一平方符号是啥平方厘米符号怎么写平方的符号是什么平方是不是数学符号平方代号怎么写一平方符号是啥一平方符号是m右上角一个小2平方厘米符号怎么写Cm^2。平方米用字母表示为：m2。平方分米用字母表示为：dm2。平方厘米用字母表示为：cm2。平方米（㎡）

投稿用户
资质办理 2023年 7月 23日
29 0
黄冰糖的功效与作用？太谷黄冰糖为啥好

各位老铁们好，相信很多人对黄冰糖的功效与作用都不是特别的了解，因此呢，今天就来为大家分享下关于黄冰糖的功效与作用以及太谷黄冰糖为啥好的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！本文目录太谷黄冰糖为啥好白冰糖和黄冰糖的区别黄糖和冰糖区别黄冰糖是蔗糖吗黄冰糖与白冰糖的区别和作用太谷黄冰糖为啥好老冰糖未经过脱色处理，又被称

投稿用户
资质办理 2023年 7月 19日
4 0
不计其数造句(用琳琅满目数不胜数不计其数造句)

大家好，关于不计其数造句很多朋友都还不太明白，今天小编就来为大家分享关于用琳琅满目数不胜数不计其数造句的知识，希望对各位有所帮助！本文目录不计其数意思相近的四字词用琳琅满目数不胜数不计其数造句不计其数的反义词到底是啥用琳琅满

投稿用户
资质办理 2023年 11月 27日
2 0

淘宝轮播图尺寸（淘宝轮播图尺寸是多少）

相关推荐