片画廊组件是网站中常见的UI组件，尤其是在电商平台的产品详情页上，它允许用户通过缩略图快速浏览和查看产品的多个图片。本文介绍如何仅使用原生的js、css和html实现下面动画呈现的图片画廊组件。

功能介绍

1. html结构中上方为主图区域，下方为缩略图列表，缩略图列表的两边为控制水平左右滑动的箭头导航；
2. 鼠标移动到某个缩略图上时，主图区域将显示缩略图的大图，并且缩略图着红色边框以突出显示；
3. 点击右侧箭头，缩略图向左侧滑动直到最右侧的缩略图显示在视野中，此时右侧箭头失效；类似的，点击左侧箭头，缩略图向右侧滑动直到最左侧缩略图出现在视野中，此时左侧箭头失效。

HTML结构

首先创建HTML结构，包括主图区域和下方导航区域，需要重点交代的是id为spec-list的div元素是缩略图列表的容器，容器的position属性是relative，设置了固定的宽度，overflow设置为hidden，这样其子元素超过宽度的部分将不可见，它就相当于窗户，提供了一个矩形的的可见视野。ul装载所有的缩略图，它的position属性设置为absolute，这样就可以基于其父元素设置偏移量，它的宽度大于父元素的宽度，这样就通过设置left属性实现左右滑动，在父窗口范围内的缩略图将是可见的，这样就实现了滑动效果。

<div class="product-intro">
	<div class="preview-wrap">
		<div class="preview" id="preview">
			<!-- 主图显示区域 -->
			<div class="main-img" style="width: 460px; height: 460px;">
				<img id="spec-img" alt="" src="./images/ai-generated-8833166_1280.webp" 
					style="width: 100%; height: 100%; object-fit: cover;">
			</div>

			<!-- 下方导航列表 -->
			<div class="spec-list" style="width: 452px;">
				<!-- 左侧箭头 -->
				<a id="spec-forward" href="javascript：;" class="arrow-prev disabled">
					<i class="sprite-arrow-prev">
						<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" style="scale:2;">
							<path fill="currentColor" fill-rule="evenodd" d="m15 4l2 2l-6 6l6 6l-2 2l-8-8z"/>
						</svg>
					</i>
				</a>
				<!-- 右侧箭头 -->
				<a id="spec-backward" href="javascript：;" class="arrow-next">
					<i class="sprite-arrow-next">
						<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" style="scale:2;">
							<path fill="currentColor" fill-rule="evenodd" d="m9.005 4l8 8l-8 8L7 18l6.005-6L7 6z"/>
						</svg>
					</i>
				</a>
				<!-- 缩略图列表可见区域 -->
				<div id="spec-list" class="spec-items"
					style="position: relative; width: 380px; height: 58px; overflow: hidden;">
					<!-- 缩略图列表 -->
					<ul class="lh" style="position: absolute; width: 456px; height: 58px; top: 0px; left: 0px;">
						<li class="img-hover"><img alt="" src="./images/ai-generated-8833166_1280.webp" width="54" height="54"></li>
						<li class=""><img alt="" src="./images/owl-50267_1280.jpg" width="54" height="54"></li>
						<li class=""><img alt="" src="./images/seal-8834240_1280.webp" width="54" height="54"></li>
						<li class=""><img alt="" src="./images/stork-8830107_1280.webp" width="54" height="54"></li>
						<li class=""><img alt="" src="./images/triggerfish-8832563_1280.webp" width="54" height="54"></li>
						<li class=""><img alt="" src="./images/ai-generated-8834126_1280.webp" width="54" height="54"></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

CSS样式

.product-intro {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    padding-bottom: 10px
}

.product-intro .preview-wrap {
    float: left;
    padding-bottom: 15px;
    position: relative;
    zoom:1;
    z-index: 7
}

.preview {
    position: relative
}

.preview .main-img {
    border: 1px solid #eee;
    margin-bottom: 20px;
    zoom: 1
}

.preview svg {
    color: #CCCCCC;
}

.preview .spec-list {
    margin-bottom: 18px;
    position: relative;
    zoom: 1
}

.preview .spec-list ul {
    margin: 0;
    transition: left 0.5s ease;
    list-style-type: none;
    padding-left: 0;
}

.preview .spec-list .arrow-next,.preview .spec-list .arrow-prev {
    display: block;
    width: 22px;
    height: 32px;
    float: left;
    position: absolute;
    cursor: pointer;
    top: 50%;
    margin-top: -16px
}

.preview .spec-list .arrow-next i,.preview .spec-list .arrow-prev i {
    display: block
}

.preview .spec-list .arrow-prev {
    left: 0
}

.preview .spec-list .arrow-prev:hover i svg {
    color: #999999;
}

.preview .spec-list .arrow-prev.disabled i svg {
    color: #DFDFDF;
}

.preview .spec-list .arrow-next {
    right: 0
}

.preview .spec-list .arrow-next:hover i svg {
    color: #999999;
}

.preview .spec-list .arrow-next.disabled i svg {
    color: #DFDFDF;
}

.preview .spec-items {
    width: 224px;
    margin: 0 auto;
    overflow: hidden
}

.preview .spec-items ul {
    width: 2000px
}

.preview .spec-items ul li {
    float: left;
    margin: 0 9px;
    max-width: 60px;
    max-height: 70px
}

.preview .spec-items ul li img {
    border: 2px solid #fff;
    padding-bottom: 1px
}

.preview .spec-items ul li.img-hover img,.preview .spec-items ul li:hover img {
    border: 2px solid #e53e41
}

.preview #spec-img {
    max-height: 600px;
}

.preview .spec-list .spec-items {
    width: 390px
}

JavaScript交互

js主要处理鼠标hover到缩略图更新主图区域图片的src属性值，以及缩略图的红色边框效果；以及实现左右侧箭头点击产生的缩略图列表左右滑动效果、箭头失效处理，注意js中是直接设置ul的left属性值，要实现滑动的动画效果，需要在css样式中设置transition属性为left 0.5s ease，否则就不会产生动画效果。

个简单的HTML文档结构，可以用任意编辑器新建html文件，然后用浏览器打开看效果。

<!DOCTYPE HTML>
<html>
    <head>
        <title>小白学HTML</title>
    </head>

    <body>
        页面内容
    </body>
</html>

文档声明

<!DOCTYPE HTML>声明当前文档是html。如果没有这个声明，一般来说问题也不大，现在大多数浏览器都会识别并按照HTML文档来解析运行。

结构说明

HTML文档结构包含一个html标签元素。html标签元素中有两个重要的元素 <head></head> 和 <body></body>。

<head></head> 元素中有 <title></title> 子元素，用来描述页面的标题，显示在浏览器的页面中。

<body></body> 元素主要用来放构成页面的元素。此实例中只有一行 '页面内容' 文字。

head 和 body 元素在 html 元素中，是 html 的内容。因此，

• html 是 head 和 body 的父元素
• head 和 body 是 html 的子元素
• head 有一个子元素 title
• head 和 body 互为兄弟元素
• head 和 title 都是 html 的后代元素

整个HTML结构是一个嵌套的树形结构，可视区域内容集中在 html 的子元素 body 中。

• 实网页的结构有三大类，和人体结构大概一致的，比如我们说一个人，有头 ，有身体，有脚。这是形容一个人的结构。
• 那么在HTML网页中，它也有结构。 分别对应的是头部标签<head></head>。身体标签<body></body>。 脚(底部标签)<footer></footer>。
• 那么到这里你就明白了网页的基本组成结构了，下面我放了一张图片，大家可以看一下！下一期文章为大家介绍头部标签<head></head>的使用方法以及它的作用。