JavaScript 缩略图滑块

介绍

本文介绍了如何使用 JavaScript 创建缩略图滑块。此滑块可以让用户选择图片缩略图并切换到完整的图片视图。

实现步骤

步骤1: 创建 HTML 元素

在 HTML 中创建一个 div 元素，在其中添加多个缩略图，每个缩略图都必须有唯一的标识符。

<div id="thumbnail-slider">
  <img src="thumbnail1.jpg" id="thumbnail1">
  <img src="thumbnail2.jpg" id="thumbnail2">
  <img src="thumbnail3.jpg" id="thumbnail3">
  <img src="thumbnail4.jpg" id="thumbnail4">
  <img src="thumbnail5.jpg" id="thumbnail5">
</div>

步骤2: 添加 CSS 样式

添加 CSS 样式来为缩略图滑块创建样式。样式可以根据需要进行调整。

#thumbnail-slider {
  display: flex;
  overflow-x: scroll;
  scrollbar-width: none; /* 隐藏滚动条，需要浏览器支持 */
  -webkit-overflow-scrolling: touch; /* 兼容移动设备 */
}

#thumbnail-slider::-webkit-scrollbar {
  display: none; /* 隐藏滚动条，需要浏览器支持 */
}

#thumbnail-slider img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 10px;
  cursor: pointer;
  border: 2px solid transparent;
}

#thumbnail-slider img.active {
  border: 2px solid red;
}

步骤3: 添加 JavaScript

添加 JavaScript 代码来实现缩略图滑块的交互。

var thumbnailSlider = document.getElementById("thumbnail-slider");
var thumbnails = thumbnailSlider.getElementsByTagName("img");
var activeThumbnail = 0;

for (var i = 0; i < thumbnails.length; i++) {
  /* 为每个缩略图添加点击事件 */
  thumbnails[i].addEventListener("click", function() {
    /* 更新活动的缩略图 */
    activeThumbnail = this.id.substring(9);
    /* 更新每个缩略图的样式 */
    updateThumbnails();
  });
}

function updateThumbnails() {
  for (var i = 0; i < thumbnails.length; i++) {
    /* 添加或移除 active 类 */
    if (i == activeThumbnail) {
      thumbnails[i].classList.add("active");
    } else {
      thumbnails[i].classList.remove("active");
    }
  }
}

步骤4: 添加视图

在 HTML 中添加需要切换的图片视图。

<div id="image-view">
  <img src="image1.jpg" id="image">
</div>

步骤5: 更新 JavaScript

更新 JavaScript 代码以响应缩略图的点击事件并更新视图。

var thumbnailSlider = document.getElementById("thumbnail-slider");
var thumbnails = thumbnailSlider.getElementsByTagName("img");
var activeThumbnail = 0;
var imageView = document.getElementById("image");
var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg"];

for (var i = 0; i < thumbnails.length; i++) {
  /* 为每个缩略图添加点击事件 */
  thumbnails[i].addEventListener("click", function() {
    /* 更新活动的缩略图 */
    activeThumbnail = this.id.substring(9);
    /* 更新每个缩略图的样式 */
    updateThumbnails();
    /* 更新图片视图 */
    imageView.src = images[activeThumbnail];
  });
}

function updateThumbnails() {
  for (var i = 0; i < thumbnails.length; i++) {
    /* 添加或移除 active 类 */
    if (i == activeThumbnail) {
      thumbnails[i].classList.add("active");
    } else {
      thumbnails[i].classList.remove("active");
    }
  }
}

结论

本文介绍了如何使用 JavaScript 创建缩略图滑块，并在用户选择缩略图时切换到完整的图片视图。你可以在这个基础上进一步扩展和优化滑块的功能。