本 HTML 和 CSS 代码可创建一个轻量级、简约且时尚的图片库,整体效果包含一张中央主图和其下方的可点击缩略图,当点击缩略图时,主图片会发生变化,显示所点击的图片,该插件使用简短的 CSS 以及 少许的 JS 代码进行实现,非常的轻量级,而且还支持响应式布局,使用起来也特别方便,只需要把图片元素放入id为thumbnails的区域内即可实现,该插件提供一种交互式的图片浏览方式,利用此插件展示网站的图片会给人留下不一样的感觉。
<img id="main" src="./img/1.jpg"> <div id="thumbnails"> <img src="./img/1.jpg"> <img src="./img/2.jpg"> <img src="./img/6.webp"> <img src="./img/7.jpeg"> <img src="./img/8.jpeg"> <img src="./img/10.webp"> </div>