图片画廊组件是网站中常见的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，否则就不会产生动画效果。

(function() {
    // 监听缩略图的鼠标进入事件，更新显示大图
    var thumbnail_img_list = document.querySelectorAll("#spec-list ul li img");
    var spec_img = document.getElementById("spec-img");
    for (let i=0; i < thumbnail_img_list.length; i++) {
        let thumbnail_img = thumbnail_img_list[i];
        thumbnail_img.addEventListener("mouseenter", function(e) {
            // 移除当前img-hover类
            let img_pre_hoverd = document.querySelector("#spec-list ul li.img-hover");
            if (img_pre_hoverd) {
                img_pre_hoverd.classList.remove("img-hover");
            }
            // 添加当前img-hover类
            e.target.parentNode.classList.add("img-hover");
            // 更新主图区域的图片源
            spec_img.src = thumbnail_img.src;
        });
    }

    // 缩略图的左右滑动效果
    var btn_next = document.getElementById("spec-backward");
    var btn_pre = document.getElementById("spec-forward");
    var spec_list = document.querySelector("#spec-list");
    var spec_list_ul = document.querySelector("#spec-list ul");
    
    // 监听右侧箭头的点击事件
    btn_next.addEventListener("click", function(e) {
        if (!this.classList.contains("disabled")) {
            // 点击右侧箭头，缩略图左侧滑动直到最右侧缩略图可见，即left为缩略图宽度-可见容器宽度，为负值
            spec_list_ul.style.left = (spec_list.clientWidth - spec_list_ul.clientWidth) + "px";

            // 右侧箭头失效
            this.classList.add("disabled");
            // 左侧箭头生效
            btn_pre.classList.remove("disabled");
        }
    });

    // 点击左侧箭头的点击事件
    btn_pre.addEventListener("click", function(e) {
        if (!this.classList.contains("disabled")) {
            // 点击左侧箭头，缩略图右侧滑动直到最左侧缩略图可见，即left为0
            spec_list_ul.style.left = "0px";

            // 左侧箭头失效
            this.classList.add("disabled");
            // 右侧箭头失效
            btn_next.classList.remove("disabled");
        }
    });

})();