單擊時更改多個圖像（類似於 Cargo 圖像庫擦洗）

Question

我正在嘗試使用我自己的 HTML/CSS 和/或 Java 復制 Cargo 的圖片庫清理。 我想要的圖片點擊示例： https ://sage-smith.com/。 它類似於這個堆棧線程（在我的代碼中工作）： 如何更改圖像 onclick javascript 函數？

但是，此解決方案僅提供在 2 個圖像之間單擊。 我正在嘗試使用多個圖像（如圖像庫）來做到這一點。

這是我到目前為止所擁有的：

HTML

 <a><img src="collage3.jpg" id="changer" onclick="changeImage(this)"/></a>

Javascript

  function changeImage(element) {
     element.src = element.bln ? "collage3.jpg" : "asset-2.png";
     element.bln = !element.bln;  /* assigns opposite boolean value always */
 }

Answer 1

如果您只需要更改 2 個圖像，您可以通過在 css 中顯示和阻止來添加一些樣式

簡單的例子：

<div onclick="yourFunction()">
  <img src="url" style="display: none" class="img1"/>
  <img src="url" style="display: block" class="img2"/>
</div>

 
// js

function yourFunction(){
  //here is you need to add style for img1 like  display block aaa img2 is 
  //display none !
  document.querySelector(".img1").style.display = 'block'";
  document.querySelector(".img2").style.display = 'none'";

  //if you need to back images on click again you can do it by false and  true 
}

//this is a simple code that i thought

Answer 2

首先，我建議您預加載圖像。 有一個圖像源數組，然后創建一個新的圖像數組，然后您可以循環訪問。 在這個例子中，我使用了一個 promise和async/await來管理這個操作。

每個圖像集都有一個容器。 給它附加一個監聽器。 我們在addEventListener中引用的函數實際上返回了一個新函數，該函數將在事件觸發時用作處理程序。 我們傳入容器、一個 id 和它將負責的圖像集。

在handleClick中，我們初始化index ，它是數組的當前索引。 我們在容器中設置初始圖像，然后增加index以備下次點擊。

閉包（ handleClick返回的函數完成工作。當點擊被觸發時，它會檢查index是否超過數組的長度（在這種情況下，它將index重置為 0），然后更新圖像，最后增加index為下一輪。

 const data=[["https://dummyimage.com/100x100/ad40ad/000000","https://dummyimage.com/100x100/454545/000000","https://dummyimage.com/100x100/789acc/000000","https://dummyimage.com/100x100/994563/000000","https://dummyimage.com/100x100/fff456/000000"],["https://dummyimage.com/100x100/ad40ad/000000","https://dummyimage.com/100x100/454545/000000","https://dummyimage.com/100x100/789acc/000000","https://dummyimage.com/100x100/994563/000000","https://dummyimage.com/100x100/fff456/000000"]]; // Returns a new array of images from // the source array function loadImageSet(arr) { return new Promise(res => { const set = arr.map(src => { const img = new Image(); img.src = src; return img; }); res(set); }); } // Returns a nested array of images function preload(data) { return Promise.all(data.map(loadImageSet)); } async function main(data) { // Get the images const images = await preload(data); // Cache the containers const containers = document.querySelectorAll('div'); // For each container add a listener. `handleClick` // does some initial setup (using the id, and image set), // and then returns a new function that is called // when `click` is triggered containers.forEach(c => { const { id } = c.dataset; const imageSet = images[id - 1]; c.addEventListener('click', handleClick(c, id, imageSet), false); }); }; // Call the main function main(data); // Accepts an id and an image set function handleClick(container, id, imageSet) { // Initialises the array index let index = 0; // Initialises the first image container.appendChild(imageSet[index]); // Increases the index ++index; // Return the function that is called when // the click event is triggered return function () { // Reset `index` if it hits the `imageSet` length if (index === imageSet.length) index = 0; // Replace the image with the next one in // in the `imageSet` array const img = container.querySelector('img'); img.replaceWith(imageSet[index]); // Finally increase `index` ++index; } }

 div { display: inline-block; height: 100px; width: 100px; } div:hover { cursor: pointer; } img { height: 100px; width: 100px; }

 <div data-id="1"></div> <div data-id="2"></div>