我有一个关于我正在做的JS项目的问题。我不知道JS逻辑不起作用的原因。正在尝试基于所选缩略图实现滑动图像。提前感谢。在此处输入图像描述
我已经附上了我的VS代码和网站结果
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>您的交互式代码运行良好：单击缩略图后，所有内容都会更新。单击下面示例中的图像以查看背景变化：
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>