使用 CSS 创建响应式图像滑块

使用 CSS 创建响应式图像滑块

效果展示

• PC 端效果

• 移动端 / iPad 效果

CSS 知识点

• 媒体查询知识点复习
• position: absolute 的使用复习
• :nth-child 的使用复习

页面需求及实现思路

需求

• 页面会根据设备大小形成不同的布局方式
• 当前展示图片放大并且展示对应的标题和描述
• 其他未展示的图片以小缩略图展示在当前激活的图片上

实现思路

• 使用@media实现不同大小页面的样式，主要是针对图片容器进行适度修改就可以
• 找一个总容器来装载所有相关页面元素，当超出的元素则会隐藏
• 找一个容器专门来装载所有图片元素，并使用inset来控制边距
• 找一个容器专门装载图片元素和相关信息，并使用:nth-child和left控制缩略图的位置

整体页面布局

<!-- 总容器 -->
<div class="container">
  <!-- 图片展示容器 -->
  <div class="slider">
    <!-- 图片元素，第一个元素为当前激活展示的元素，第二个为预备激活展示的元素 -->
    <div class="slides" style="--img: url('./bg1.jpg')">
      <div class="content">
        <h2>Slide 01</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eos,
          labore explicabo impedit nostrum in!
        </p>
      </div>
    </div>
    <div class="slides" style="--img: url('./bg2.jpg')">
      <div class="content">
        <h2>Slide 02</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eos,
          labore explicabo impedit nostrum in!
        </p>
      </div>
    </div>
    <!-- 省略了剩余的其他图片元素 -->
  </div>
  <div class="buttons">
    <span class="prev"></span>
    <span class="next"></span>
  </div>
</div>

整体样式布局

主要是完成总容器和图片容器进行样式设置。

.container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}

.slider {
  position: absolute;
  inset: 80px 200px 80px 80px;
  background: #ccc;
  border-radius: 20px;
}

实现图片容器基础样式

.slider .slides {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 240px;
  height: 320px;
  background: var(--img);
  background-size: cover;
  background-position: center;
  transition: 0.5s;
  border-radius: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

设置激活图片和图片缩略图样式

/* 第一个容器和第二个容器设置为激活，这样便于图片在切换时不会产生空白部分 */
.slider .slides:nth-child(1),
.slider .slides:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(0);
  background-size: cover;
}

.slider .slides:nth-child(3) {
  /* 采用绝对定位后，通过left属性来便宜图片缩略图的位置安排 */
  left: calc(50% + 240px);
  background-size: cover;
}

.slider .slides:nth-child(4) {
  left: calc(50% + 500px);
  background-size: cover;
}

.slider .slides:nth-child(5) {
  left: calc(50% + 760px);
  background-size: cover;
}

/** 隐藏最后一个图片主要是为了图片切换的动画过渡效果更好 */
.slider .slides:nth-child(6) {
  left: calc(50% + 1020px);
  background-size: cover;
  opacity: 0;
}

对图片容器中的文字部分进行样式实现

.content {
  position: relative;
  padding: 40px;
  max-width: 600px;
  transition: 0.25s;
  transition-delay: 0s;
  transform: translateY(40px);
  z-index: 10000;
  opacity: 0;
}

.slider .slides:nth-child(1) .content,
.slider .slides:nth-child(2) .content {
  opacity: 1;
  /* 动画执行部分，内容实现上移操作 */
  transform: translateY(0px);
  transition-delay: 0.5s;
}

.content h2 {
  font-size: 4em;
  color: #fff;
}

.content p {
  color: #fff;
}

实现图片切换按钮

.buttons {
  position: absolute;
  bottom: 15px;
  display: flex;
  gap: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.buttons span {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  background: #111;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.buttons span::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border-top: 4px solid #fff;
  border-left: 4px solid #fff;
  transform: rotate(315deg) translate(2px, 2px);
}

.buttons span:nth-child(2)::before {
  transform: rotate(135deg) translate(2px, 2px);
}

.buttons span:active {
  opacity: 0.5;
}

实现上述代码后，效果如下：

使用 JavaScript 实现图片位置的切换

实现图片的轮播，我们可以使用appendChild和prepend方法来实现我们的效果。

let next = document.querySelector(".next");
let prev = document.querySelector(".prev");
let slider = document.querySelector(".slider");

next.addEventListener("click", function () {
  let sliders = document.querySelectorAll(".slides");
  slider.appendChild(sliders[0]);
});

prev.addEventListener("click", function () {
  let slides = document.querySelectorAll(".slides");
  slider.prepend(slides[slides.length - 1]);
});

使用媒体查询实现响应式布局

响应式的实现主要是修改对应的图片展示容器和图片元素即可。

@media (max-width: 900px) {
  /* 修改inset的距离 */
  .slider {
    position: absolute;
    inset: 40px 40px 200px 40px;
  }
  /* top 设置为 initial 让图片缩略图居于底部 */
  .slider .slides {
    width: 100px;
    height: 100px;
    top: initial;
    bottom: -170px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
  }
  /* 修改对应缩略图的布局 */
  .slider .slides:nth-child(1),
  .slider .slides:nth-child(2) {
    top: initial;
    bottom: 0;
  }
  .slider .slides:nth-child(3) {
    left: 0;
  }
  .slider .slides:nth-child(4) {
    left: 120px;
  }
  .slider .slides:nth-child(5) {
    left: 240px;
  }
  .slider .slides:nth-child(6) {
    left: 360px;
  }

完整代码下载

[完整代码下载](https://gitee.com/_asd/css_spe cial_effects/tree/master/animate/animate_simple_javascript_scroll)