s1html用图片做提交按钮,动手练一练，用 CSS Checkbox Hack 技术制作一个响应式图片幻灯...-CSDN博客

大家好，今天我们将一起学习下如何从零开始创建一个具有缩略图功能的响应式图片幻灯。这个案例我们无需编写任何 JavaScript 代码，这里主要运用了 CSS checkbox hack 的技术进行实现。这个案例除了运用 CSS checkbox hack 技术之外，还运用了复杂的CSS选择器、以及 flex box 和 Grid 布局的相关特性。一、首先看看幻灯的效果展示

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

二、创建 HTML 结构

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

2、接下来我们新建3个radio按钮，通过name属性进行关联分组。input type id name checked

input type id name

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

div

figure

img src alt

figure

other two list items here

label label

div

label

img src alt

span

span span

span

label

other two list items here

div三、定义样式

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

position absolute

bottom

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

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

maxwidth 450px

padding 20px

margin auto

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

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

display grid

featuredwrapper featuredlist li

gridcolumn

gridrow

opacity

transition opacity 25s

4、定义小圆圈样式

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

相应的CSS代码如下所示：featuredwrapper

position relative

featuredwrapper dots

position absolute

bottom 10px

left

transform

display flex

featuredwrapper dots lilastchild

marginright 8px

featuredwrapper dots label

display inlineblock

width 12px

height 12px

borderradius

border 1px solid white

transition background 25s

featuredwrapper dots labelhover

background currentColor

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

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

featuredwrapper arrows labelafter

position absolute

top

transform

width 40px

height 40px

borderradius

color black

backgroundposition center

backgroundrepeat norepeat

backgroundsize 24px 24px

backgroundcolor white

opacity

transition opacity 25s

featuredwrapper arrows labelbefore

left 10px

featuredwrapper arrows labelafter

right 10px

6、定义缩略图元素样式每个缩略图占据父容器的三分之一，如下图所示：

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

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

display grid

gridtemplatecolumns 1fr

gridcolumngap 20px

margintop 20px

thumblist label

display grid

thumblist img

thumblist outer

gridcolumn

gridrow

thumblist outer

display grid

placeitems center

transition background 25s

thumblist inner

fontsize 18px

opacity

transform 20px

transition all 25s四、使用 Checkbox Hack 切换图片

接下来是本案例的核心，也是最有趣的地方，我们使用 checkbox hack 的技术模拟JS的点击事件。每次点击缩略图，相应的箭头和圆圈都会处于活动状态：相应的幻灯片大图可见

对应的圆圈背景变成白色

缩略图对应的文字标题将会显示

箭头导航将会更新对应相关上个图片/ 下个图片的链接

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

idchecked container featuredlist linth

idchecked container arrows hoverbefore

idchecked container arrows hoverafter

opacity

idchecked container arrows before

content ’’

backgroundimage arrowprevslideshowsvg

idchecked container arrows after

content ’’

backgroundimage arrownextslideshowsvg

idchecked container dots

background currentColor

idchecked container outer

background overlay

idchecked container inner

opacity

transform none五、源码及效果展示

最终的效果体验，大家可以点击原文链接进行体验，由于文章篇幅有限，完整的源码大家可以点击下方链接进行获取。

链接：https://pan.baidu.com/s/1K0Y5xbziOe1l9hYVxrjVUg

密码：u28s小节

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