JS幻灯片背景图片基于缩略图上的点击事件问题答案

【问题标题】：JS Slide Background Image based on Click event on thumbnail ProblemJS幻灯片背景图片基于缩略图上的点击事件问题
【发布时间】：2021-12-30 22:22:18
【问题描述】：

我有一个关于我正在做的 JS 项目的问题。我不知道JS逻辑不起作用的原因。尝试根据选择的缩略图实现滑动图像。提前致谢。enter image description here

I have attached my VS code and Website result

product.js

const productImages = document.querySelectorAll(".product-images img"); // selecting all image thumbs
const productImageSlide = document.querySelector(".image-slider"); // seclecting image slider element

let activeImageSlide = 0; // default slider image

productImages.forEach((item, i) => {
  // loopinh through each image thumb
  item.addEventListener("click", () => {
    // adding click event to each image thumbnail
    productImages[activeImageSlide].classList.remove("active"); // removing active class from current image thumb
    item.classList.add("active"); // adding active class to the current or clicked image thumb
    productImageSlide.style.backgroundImage = `url('${item.src}')`; // setting up image slider's background image
    activeImageSlide = i; // updating the image slider variable to track current thumb
  });
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="product.css" />
    <script src="product.js"></script>
    <link rel="shortcut icon" href="">
  </head>
  <body>
    <section class="product-details">
      <div class="image-slider">
        <div class="product-images">
          <img src="Images/33.png" class="active" alt="" />
          <img src="Images/44.png" alt="" />
          <img src="Images/55.png" alt="" />
          <img src="Images/6.png" alt="" />
        </div>
      </div>
    </section>
    </body>
    </html>

【问题讨论】：

请将代码嵌入文本和图像。
感谢您的评论。我现在已经嵌入了代码。

标签： javascript arrays

【解决方案1】：

您的交互式代码运行良好：单击缩略图后，所有内容都会更新。点击下例中的图片查看背景变化：

const productImages = document.querySelectorAll(".product-images img"); // selecting all image thumbs
const productImageSlide = document.querySelector(".image-slider"); // seclecting image slider element

let activeImageSlide = 0; 
productImages.forEach((item, i) => {
  item.addEventListener("click", () => {
    item.classList.add("active");
    productImageSlide.style.backgroundImage = `url('${item.src}')`;
    activeImageSlide = i;
  });
});

.image-slider {
  background-repeat: no-repeat;
  background-size: cover;
  background-color: grey;
  
  display: flex;
  align-items: flex-end;
  justify-content: center;
  
  height: 300px;
}

img {
  border: 4px solid transparent;
}

img.active {
  border-color: white;
}

<section class="product-details">
  <div class="image-slider">
    <div class="product-images">
      <img src="https://picsum.photos/id/10/100" class="active" alt="" />
      <img src="https://picsum.photos/id/20/100" alt="" />
      <img src="https://picsum.photos/id/30/100" alt="" />
      <img src="https://picsum.photos/id/40/100" alt="" />
    </div>
  </div>
</section>

但是，初始状态与预期不符。您设置了 active 类，但您从未将活动图像的 src 复制到父级。

一个简单的解决方法是将此行添加到 foreach 之外：

productImageSlide.style.backgroundImage = `url('${productImages[activeImageSlide].src}')`;

查看下面的示例以查看正确初始化的背景

const productImages = document.querySelectorAll(".product-images img"); // selecting all image thumbs
const productImageSlide = document.querySelector(".image-slider"); // seclecting image slider element

let activeImageSlide = 0; 
productImages.forEach((item, i) => {
  item.addEventListener("click", () => {
    item.classList.add("active");
    productImageSlide.style.backgroundImage = `url('${item.src}')`;
    activeImageSlide = i;
  });
});

productImageSlide.style.backgroundImage = `url('${productImages[activeImageSlide].src}')`;

.image-slider {
  background-repeat: no-repeat;
  background-size: cover;
  background-color: grey;
  
  display: flex;
  align-items: flex-end;
  justify-content: center;
  
  height: 300px;
}

img {
  border: 4px solid transparent;
}

img.active {
  border-color: white;
}

<section class="product-details">
  <div class="image-slider">
    <div class="product-images">
      <img src="https://picsum.photos/id/10/100" class="active" alt="" />
      <img src="https://picsum.photos/id/20/100" alt="" />
      <img src="https://picsum.photos/id/30/100" alt="" />
      <img src="https://picsum.photos/id/40/100" alt="" />
    </div>
  </div>
</section>

如果您不喜欢重复，可以将点击处理逻辑与呈现逻辑分开。

下面的示例有一个 render 函数，它获取活动图像的索引并确保所有内容都正确显示。

点击处理程序使用点击图像的索引调用render。要初始化页面，请调用render(0)。

const productImages = document.querySelectorAll(".product-images img"); // selecting all image thumbs
const productImageSlide = document.querySelector(".image-slider"); // seclecting image slider element


// How to render the state
const render = activeImageIndex => {
  productImages.forEach(img => img.classList.remove("active"));
  productImages[activeImageIndex].classList.add("active");
  productImageSlide.style.backgroundImage = `url('${productImages[activeImageIndex].src}')`;
}

// How to handle clicks
const onClick = (item, i) => {
  render(i);
}


// Attach listeners
productImages.forEach((item, i) => {
  item.addEventListener("click", () => {
    onClick(item, i);
  });
});

// Render initial state
render(0);

.image-slider {
  background-repeat: no-repeat;
  background-size: cover;
  background-color: grey;
  
  display: flex;
  align-items: flex-end;
  justify-content: center;
  
  height: 300px;
}

img {
  border: 4px solid transparent;
}

img.active {
  border-color: white;
}

<section class="product-details">
  <div class="image-slider">
    <div class="product-images">
      <img src="https://picsum.photos/id/10/100" class="active" alt="" />
      <img src="https://picsum.photos/id/20/100" alt="" />
      <img src="https://picsum.photos/id/30/100" alt="" />
      <img src="https://picsum.photos/id/40/100" alt="" />
    </div>
  </div>
</section>

【讨论】：

哇非常详尽和彻底的答案。我很高兴在计算机科学领域有像你这样的人愿意帮助像我这样的小初学者。谢谢你，新年快乐。