动手练一练，用 CSS Checkbox Hack 技术制作一个响应式图片幻灯

原创

前端达人

修改于 2020-03-17 18:47:13

1.1K0

修改于 2020-03-17 18:47:13

文章被收录于专栏：前端达人前端达人

大家好，今天我们将一起学习下如何从零开始创建一个具有缩略图功能的响应式幻灯片。这个案例我们无需编写任何 JavaScript 代码，这里主要运用了 CSS checkbox hack 的技术进行实现。

这篇文章运用了复杂的CSS选择器、flex box 和 Grid 布局、 CSS checkbox 的伪类选择器 checked 等技术

一、首先看看幻灯的效果展示

如下图所示，一个功能完备漂亮的幻灯片图片组件。

二、创建 HTML 结构

1、首先我们准备3张图片素材。

2、接下来我们新建3个radio按钮，通过name属性进行按钮分组

<input type="radio" id="image1" name="image" checked>
<input type="radio" id="image2" name="image">
<input type="radio" id="image3" name="image">

3、然后我们创建 .featured-wrapper 和 .thumb-list 两个容器，放置内容元素

3.1、.featured-wrapper 元素包含3个列表：

1、一个大图列表，一次只能显示一个图片

2、一组箭头列表，用于大图切换

3、一组圆圈列表，用于大图切换

这里我们使用label标签技巧与radio表单进行对应代替JS事件点击，同一个 radio 可以关联多个与之对应的 label 标签。

3.2、.thumb-list 容器包含一组图片缩略图，与大图对应，用于切换大图。

总而言之，我们说了这么多，我们可以通过箭头、圈圈、缩略图进行幻灯大图的切换，整体的 HTML 结构如下图所示：

基于上图所示，最终完成的 HTML 代码结构如下：

<div class="container">
  <div class="featured-wrapper">
    <ul class="featured-list">
      <li>
        <figure>
          <img src="IMG_SRC" alt="">
        </figure>
      </li>
      <!-- other two list items here -->
    </ul>
    <ul class="arrows">
      <li>
        <label for="image1"></label>
      </li>
      <li>
        <label for="image2"></label>
      </li>
      <li>
        <label for="image3"></label>
      </li>
    </ul>
    <ul class="dots">
      <li>
        <label for="image1"></label>
      </li>
      <li>
        <label for="image2"></label>
      </li>
      <li>
        <label for="image3"></label>
      </li>
    </ul>
  </div>
  <ul class="thumb-list">
    <li>
      <label for="image1">
        <img src="IMG_SRC" alt="">
        <span class="outer">
          <span class="inner">...</span>
        </span>
      </label>
    </li>
    <!-- other two list items here -->
  </ul>
</div>

三、定义样式

1、将 radio 按钮移除至屏幕外，示例代码如下:

input[type="radio"] {
  position: absolute;
  bottom: 0;
  left: -9999px;
}

这里你会注意到，我使用了bottom: 0，主要为了防止每次点击标签时，浏览器跳至页面顶部。虽然不是最佳实践，但是这个方法对本案例有效，还有一个更好的做法，我们可以设置display: none，但是不符合键盘可访问性（accessibility）的标准，这里还是推荐 bottom: 0;

2、定义最外层 container 容器的样式，设置最大宽度以及让其水平居中

.container {
  max-width: 450px;
  padding: 0 20px;
  margin: 0 auto;
}

3、定义大图列表样式

为了只显示一张大图，其他图片将会被盖住并且隐藏，你可能最先想到的是改变文档正常流，使用position属性进行定位的方法进行隐藏，这里你需要注意图片的宽高比，通常使用固定高度的解决方案，在这个案例中，我们使用CSS的Grid新布局，将图片放置在1行1列的单元网格中，示例如下图所示：

与上图对应的CSS代码如下：

.featured-wrapper .featured-list {
  display: grid;
}
 
.featured-wrapper .featured-list li {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transition: opacity 0.25s;
}

4、定义小圆圈样式

我们需要将小圆圈定位在 .featured-wrapper 容器底部，点击相应圆圈进行切换大图：

相应的CSS代码如下所示：

/*CUSTOM VARIABLES HERE*/
 
.featured-wrapper {
  position: relative;
}
 
.featured-wrapper .dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
 
.featured-wrapper .dots li:not(:last-child) {
  margin-right: 8px;
}
 
.featured-wrapper .dots label {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--white);
  transition: background 0.25s;
}
 
.featured-wrapper .dots label:hover {
  background: currentColor;
}

5、定义箭头样式

接下来我们继续定义箭头切换的样式，我们将其放置在.featured-wrapper容器，如下图所示：

这里需要注意的是，这些箭头与 radio 按钮一一对应关联，这里我们用到了::before 和 ::after伪元素创建圆形元素，示例代码如下：

/*CUSTOM VARIABLES HERE*/
 
.featured-wrapper .arrows label::before,
.featured-wrapper .arrows label::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--black);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-color: var(--white);
  opacity: 0.5;
  transition: opacity 0.25s;
}
 
.featured-wrapper .arrows label::before {
  left: 10px;
}
 
.featured-wrapper .arrows label::after {
  right: 10px;
}

6、定义缩略图元素样式

每个缩略图占据父容器的三分之一，如下图所示：

在这里，为了将图片标题放置在图片之上，我们用的不是传统的CSS定位，这里我们应用了CSS Grid技巧。

我们将每个缩略图变成单一网格（一行一列），并使用grid垂直居中的技巧 place-items: center 让文本垂直居中，相关代码如下所示：

.thumb-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
  margin-top: 20px;
}
 
.thumb-list label {
  display: grid;
}
 
.thumb-list img,
.thumb-list .outer {
  grid-column: 1;
  grid-row: 1;
}
 
.thumb-list .outer {
  display: grid;
  place-items: center;
  transition: background 0.25s;
}
 
.thumb-list .inner {
  font-size: 18px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.25s;
}

四、使用 Checkbox Hack 切换图片

接下来是本案例的核心，也是最有趣的地方，我们使用 checkbox hack 的技术模拟JS的点击事件。

每次点击缩略图，相应的箭头和圆圈都会处于活动状态：

相应的幻灯片大图可见
对应的圆圈北京变成白色
缩略图对应的文字标题将会出现
箭头导航将会更新对应相关图片的链接

基于以上需求最终完成的CSS代码如下：

/*CUSTOM VARIABLES HERE*/
 
[id="image1"]:checked ~ .container .featured-list li:nth-child(1),
[id="image2"]:checked ~ .container .featured-list li:nth-child(2),
[id="image3"]:checked ~ .container .featured-list li:nth-child(3),
[id^="image"]:checked ~ .container .arrows [for^="image"]:hover::before,
[id^="image"]:checked ~ .container .arrows [for^="image"]:hover::after {
  opacity: 1;
}
 
[id="image1"]:checked ~ .container .arrows [for="image3"]::before,
[id="image2"]:checked ~ .container .arrows [for="image1"]::before,
[id="image3"]:checked ~ .container .arrows [for="image2"]::before {
  content: ’’; 
  background-image: url(arrow-prev-slideshow.svg);
}
 
[id="image1"]:checked ~ .container .arrows [for="image2"]::after,
[id="image2"]:checked ~ .container .arrows [for="image3"]::after,
[id="image3"]:checked ~ .container .arrows [for="image1"]::after {
  content: ’’; 
  background-image: url(arrow-next-slideshow.svg);
}
 
[id="image1"]:checked ~ .container .dots [for="image1"],
[id="image2"]:checked ~ .container .dots [for="image2"],
[id="image3"]:checked ~ .container .dots [for="image3"] {
  background: currentColor;
}
 
[id="image1"]:checked ~ .container [for="image1"] .outer,
[id="image2"]:checked ~ .container [for="image2"] .outer,
[id="image3"]:checked ~ .container [for="image3"] .outer {
  background: var(--overlay);
}
 
[id="image1"]:checked ~ .container [for="image1"] .inner,
[id="image2"]:checked ~ .container [for="image2"] .inner,
[id="image3"]:checked ~ .container [for="image3"] .inner {
  opacity: 1;
  transform: none;
}

五、源码及效果展示

最终的效果体验，大家可以点击文末了解更多链接进行体验，由于文章篇幅有限，完整的源码大家可以私信“幻灯片”获取下载链接。

小节

到此我们完成了本案例，通过本案例，我相信你对 CSS checkbox hack 技术有了更清楚的认识，希望你能够适应这项技术，并将其运用到自己的项目中。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

容器

html

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

容器

html

登录后参与评论

0 条评论

热度