我正在嘗試從圖像數組中顯示圖像 - javascript

Question

我的主頁上顯示了一個圖像，並希望用戶單擊下一個圖像按鈕，以便顯示數組中的下一個圖像。 我見過類似的問題並嘗試解決問題，但似乎沒有任何效果。 我認為代碼是正確的，當用戶點擊“下一個圖像”時，我似乎無法顯示圖像。 任何建議將不勝感激。

JS：

var images = ["/aboutmepages/imagesAM/SSR.jpeg", "/aboutmepages/imagesAM/ATA.png",
  "/aboutmepages/imagesAM/BC.jpg", "/aboutmepages/imagesAM/GCU.jpg"
];

var current = 0; //current image displayed

var change_img = document.getElementById("placeholder");

function next() {
  if (current >= 0) {
    current = images.length;
    current++;
  }
  change_img.src = images[current].src;
}

HTML

  <img src="/aboutmepages/imagesAM/SSR.jpeg" id="placeholder">
    
    <div id="display">
        <button class="button" onclick="next()">Next Image</button>
    </div>  

Answer 1

你必須添加src的image中images陣列使用current指數

function next() {
  if (current === images.length) current = 0;
  change_img.src = images[current++];
}

NOTE: I've used lorem-picsum for demo purpose. You can add yours link

 var images = [ "https://picsum.photos/200/300", "https://picsum.photos/200", "https://picsum.photos/200/300", "https://picsum.photos/200", "https://picsum.photos/200/300", "https://picsum.photos/200" ]; var current = 0; //current image displayed var change_img = document.getElementById("placeholder"); function next() { if (current === images.length) current = 0; change_img.src = images[current++]; } const button = document.querySelector("button"); button.addEventListener("click", next);

 <div id="display"> <button class="button">Next Image</button> </div> <img src="https://picsum.photos/200" id="placeholder" />

Answer 2

關鍵問題是這一行：

change_img.src = images[current].src;

它應該是

change_img.src = images[current];

因為數組中的任何元素都沒有src屬性，所以只有數組索引處的字符串。

與其檢查current >= 0 （我們已經知道它將為零），不如檢查current是否小於數組長度（因為數組使用從零開始的索引）。

 const images = [ 'https://dummyimage.com/100x100/00ff00/000', 'https://dummyimage.com/100x100/0000ff/fff', 'https://dummyimage.com/100x100/000/fff', 'https://dummyimage.com/100x100/fff/000', ]; const placeholder = document.getElementById('placeholder'); const button = document.querySelector('button'); button.addEventListener('click', next, false); let current = 0; function next() { if (current < images.length) { placeholder.src = images[current]; ++current; } } next();

 <button>Next</button> <img id="placeholder" />