單擊右側的色樣時，如何將大圖更改為縮略圖？

Question

單擊右側的色樣時，如何將大圖更改為縮略圖？ 我想我需要 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>

Answer 1

看這一行： 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