我正在嘗試從影像陣列中顯示影像-javascript-有解無憂

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

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>

uj5u.com熱心網友回復：

您必須添加src作為image中images陣列使用current索引

我正在嘗試從影像陣列中顯示影像 - javascript

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" />

uj5u.com熱心網友回復：

關鍵問題是這一行：

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" />

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/358845.html

標籤：javascript 数组图片

上一篇：將影像放在導航欄引導程式和css下方，而不會被文本重疊

下一篇：我可以將多個影像堆疊在一起并在它們之間切換嗎？HTML、CSS、Java腳本