图片画廊组件是网站中常见的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");        }    });})();