繁体   English   中英

单击右侧的色样时,如何将大图更改为缩略图?

[英]How I do change the BIG image to the thumbnail images when I click the Color Swatches on the right?

单击右侧的色样时,如何将大图更改为缩略图? 我想我需要 map 缩略图到颜色样本? 我希望在单击色样时循环浏览缩略图。 因此,当您单击第一个色样时,大图像将更新以显示第一个缩略图,依此类推

 let colorSwatch = document.querySelectorAll(".color-swatches"); let smallImg = document.getElementsByClassName("sec"); for(let i= 0; i <colorSwatch.length; i++){ colorSwatch[i].addEventListener("click", changeColor); } function changeColor(){ for (let a = 0; a < smallImg.length; a++){ document.querySelector(".main-image").setAttribute("src",smallImg[a].getAttribute("src")); console.log(a); } }
 <div class="image-container"> <img src="https://source.unsplash.com/400x400/?stationery" class="item main-image" /> <div class="secondary-image"> <img src="https://source.unsplash.com/100x100/?pen" class="item sec item-1 active " /> <img src="https://source.unsplash.com/100x100/?pencil" class="item sec item-2" /> <img src="https://source.unsplash.com/100x100/?notepad" class="item sec item-3" /> <img src="https://source.unsplash.com/100x100/?eraser" class="item sec item-4" /> </div> </div> <div class="product-info"> <h1>Product Name</h1> <p>Product description goes here two line product description</p> <h3>Color</h3> <div class="color-swatches"> <img src="color-swatch.svg" class="swatch color-1" /> <img src="color-swatch.svg" class="swatch color-2" /> <img src="color-swatch.svg" class="swatch color-3" /> <img src="color-swatch.svg" class="swatch color-4" /> </div> <h3>Quantity</h3> <div class="quantity"> <:-- <svg> <ellipse cx="35" cy="35" rx="35" ry="35" /> </svg> --> <img src="https.//cdn.glitch.global/935c1b3a-2d6f-42b5-aab8-2ea9c89cca70/minus-circle?svg:v=1645435804825" id="minus-icon" /> <h3 id="quantity-value">1</h3> <img src="https.//cdn.glitch.global/935c1b3a-2d6f-42b5-aab8-2ea9c89cca70/plus-circle?svg?v=1645435811670" id="plus-icon" /> </div> <button class="btn-primary add-to-cart-btn">Add to Cart</button> </div>

看这一行: document.querySelector(".main-image").setAttribute("src",smallImg[a].getAttribute("src")); ...你 select sec为 class 的图片来源,这意味着你得到了这个来源: src="https://source.unsplash.com/100x100/?eraser" 这就是问题, 100x100

作为解决方法,您可以使用此 CSS 样式:

img.item.main-image {
    width: 300px;
    height: 300px;
}

...并像这样更改缩略图的来源:

https://source.unsplash.com/300x300/?eraser

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM