图片轮播组件的一些心得

发表于

图片轮播组件

现在很多网站的主页中都会有图片轮播，图片轮播组件主要包含以下几部分：大图，缩略图，大图两侧的左右切换按钮，有可能还会在缩略图两侧有多组切换按钮。我们通常先实现效果，然后再通过js实现切换的交互逻辑。以下是我在实际编写轮播组件时总结的一些心得。

图片水平垂直居中等比例显示

轮播中显示的图片跟图片容器的尺寸比例不一定相同，有可能更‘胖’或者更‘瘦’，为了达到更好的视觉效果，我们保证图片可以在容器中完全显示，也就是始终按照超出比例的边来缩放图片。

要达到这个效果，最佳的方式是通过css来实现。

html代码

1
<div class="img"></div>

css

1
2
3
4
5
6
7
8
.img {
  width: 100px;
  height: 100px;
  background-position: center;
  background-size: contain; // 关键
  background-repeat: no-repeat;
  transition: background-image 0.5s linear;
}

background-size: contain可以保证背景图片始终全部展示到容器中，而background-position: center保证图片可以居中显示。

使用css的这两个属性是实现该效果最简单的方式，如果我们想要使用js来实现类似效果，我们需要首先获取图片的长宽比例，然后手动设置按照哪一边来缩放图片比例。
html

1
2
3
<div>
  <img src="" class="img">
</div>

对应的css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div {
  width: 100px;
  height: 100px;
  position: relative;
}
// 图片相对比较宽的情况
img.fat {
  width: 100%;
}
img.thin {
  height: 100%;
}
// 接下来保证图片垂直水平居中
img {
  position: absolute;
  left: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

我们使用transform让图片进行平移自身的50%，对于未知宽高的元素建议采用这种方式，对于已知宽高的情况，我们可以采用margin的形式。

1
2
3
4
5
6
7
img {
  position: absolute;
  left: 50%;
  width: 100px;
  heigth: 50px;
  margin: -25px 0 0 -50px;
}

图片切换动画

轮播中图片在切换时会有一些特效，常见的有平移，淡入淡出等。

平移

平移我们可以使用元素的left,margin属性。最理想的方式是我们使用js来控制属性的值，通过transition来确定过渡效果。

1
2
3
4
5
6
div {
  position: absolute;
  left: 0;
  top: 0;
  transition: left 1s linear;
}

当使用js修改了相应属性后，会执行相应的过渡动画效果。除了使用css来控制动画外，也可以全部使用css来实现。这里推荐使用requestanimateframe，使用这个方法，可以保证流畅的执行动画。

1
2

需要注意的是，为了保证元素的平移效果，首先需要保证各元素水平排列，可以使用两种方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 行内块元素
.father {
  // 保证不换行
  overflow: hidden;
  text-overflow: ellipses;
  white-space: nowrap; 
}
div {
  display: inline-block;
}
// 浮动元素
div {
  float: left;
  width: 1000000px; // 足够大，保证不折行
}

这里涉及到常见的水平垂直居中的一些技巧问题。我们做一个总结。

元素水平居中的方式

行内元素设置text-align

1
text-align: center;

块级元素的水平居中

1
margin: 0 auto;

定位元素居中

1
2
3
4
5
6
7
8
9
// 已知宽度
width: 100px; 
position: absolute;
left: 50%;
margin-left: -50px;
// 未知宽度情况下居中
position: absolute;
left: 50%;
transform: translate(-50%, 0);

元素垂直居中的方式

行高方式

1
2
height: 100px;
line-height: 100px;

行内元素

1
2
display: inline;
vertical-align: middle;

借助表格属性

1
2
dispaly: table-cell;
vertical-align: middle;

定位元素

1
2
3
4
5
6
7
8
9
// 已知高度
height: 100px; 
position: absolute;
top: 50%;
margin-top: -50px;
// 未知高度情况下居中
position: absolute;
top: 50%;
transform: translate(0, -50%);