使用 javascript 在圖像之間切換

Question

所以我在 js 中有一個小腳本，它會隨着時間的推移改變圖像，我想添加兩個按鈕，如果有人不想等待，可以跳過圖像，但它們並沒有真正起作用，點擊它們只會讓我回來到第一張圖片。

這是我發現的隨時間更改圖像的腳本：

<script>
var imageSources = ["image1.png", "image2.png","image3.png"];
var index = 0;
setInterval (function(){
  if (index === imageSources.length) {
    index = 0;
  }
  document.getElementById("image").src = imageSources[index];
  index++;
} , 2000);

這是我試圖在點擊時更改它們的腳本：

 function changeImage1() {
        if (document.getElementById("image").src == "image1.png") 
        {
        document.getElementById("image").src = "image3.png";    
        }
        else if (document.getElementById("image").src == "image2.png")
        {
            document.getElementById("image").src = "image1.png";
        }
        else if (document.getElementById("image").src == "image3.png")
        {
            document.getElementById("image").src = "image2.png";
    }
    else {}
 }
function changeImage2() {
        if (document.getElementById("image").src == "image1.png") 
        {
            document.getElementById("image").src = "image2.png";
        }
        else if (document.getElementById("image").src == "image2.png")
        {
            document.getElementById("image").src = "image3.png";
        }
        else if (document.getElementById("image").src == "image3.png"){
            document.getElementById("image").src = "image1.png";
        }
        else {}
    }
</script>

html：

<button name="button1" id="button1" onclick="changeImage1()">
<img src="arrow_left.png" width="50px" height="50px"/>
</button>
<img name="image" id="image" src="image1.png" width="800px" height="300px"/>
<button name="button2" id="button2" onclick="changeImage2()">
<img src="arrow_right.png" onclick="changeImage2()" width="50px" height="50px"/>
</button>

Answer 1

事情是，

  if (index === imageSources.length) {
    index = 0;
  }

這行代碼，或者說三行代碼，等待 imageSources 長度變為 3，但是 imageSources 從 1 開始計數，所以如果 imageSources 變量包含 3 個元素，則長度為 3。 但是索引是由 0 完成的，因此您必須將代碼更改為

  if (index === (imageSources.length - 1)) {
    index = 0;
  }

Answer 2

所以我想你想要一個按鈕來跳過圖像和一個按鈕來帶來上一個圖像。

首先讓我們聲明變量

const img = document.getElementById("image"); // the img element 
const imageSources = ["image1.png", "image2.png","image3.png"];
let index = 0;
let travel; // here the most important thing

您必須創建一個啟動 function 以便您可以在頁面加載或重置計時器時調用它

const startTravel = () => {
    travel = setInterval(() => {
      ++index;
      if (index < 0 || index === imageSources.length) index = 0;
      img.src = imageSources[index];
    }, 2000);
};

下一張圖片 function 就像

const changeImage2 = () => {
  clearInterval(travel);
  img.src = imageSources[++index];
  startTravel();
}

上一張圖片 function 就像

const changeImage1 = () => {
  clearInterval(travel);
  img.src = imageSources[--index];
  startTravel();
}

它還沒有完成，當你點擊跳過 5 次時，它會將索引設置為 6，而 6 不在 imageSources 中所以我不想為你做這件事，因為它很容易你必須做到

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="button1" onclick="changeImage1()">
    left
</button>

<img src="image1.jpg" alt="img" id="img">

<button id="button2" onclick="changeImage2()">
    right
</button>

<script>
  const img = document.getElementById("img");
  const imageSources = ["image1.jpg", "image2.jpg", "image3.jpg"];
  let index = 0;
  let travel;

  const startTravel = () => {
    travel = setInterval(() => {
      ++index;

      console.log(index);
      if (index < 0 || index === imageSources.length) index = 0;
      img.src = imageSources[index];
    }, 6000);
  };

  const changeImage1 = () => {
    if (index === 0) index = imageSources.length;

    clearInterval(travel);
    img.src = imageSources[--index];
    startTravel();
  }

  const changeImage2 = () => {
    if (index === imageSources.length - 1) index = -1;

    clearInterval(travel);
    img.src = imageSources[++index];
    startTravel();
  }

  startTravel();
</script>
</body>
</html>

Answer 3

您正在尋找類似於 slider 的功能。 您使用setInterval顯示的第一個片段是一個很好的工作場所。 遍歷列表使您的代碼動態化，並允許添加或刪除項目而無需更改太多代碼。

我已經擴展了您提供的代碼，並在下面制作了一個可行的片段。 請務必檢查一下。

我使用了setTimeout而不是setInterval 。 這是因為按鈕和循環都使用相同的 function 來顯示當前圖像。 所以循環將能夠再次調用自己。 並且當循環在 2 秒過去之前被調用時，它將被取消並重新開始。 當您單擊其中一個按鈕時，可能會發生這種情況。

我刪除了內聯onclick偵聽器，轉而在 JavaScript 中使用addEventListener 。 我建議你采用這種方法。 它將允許您重復更少的代碼，將 JavaScript 保持在一個位置，並使您的代碼更加靈活。
但是，我確實為按鈕添加了value屬性。 按鈕支持此屬性。 它可以攜帶少量信息，例如告訴您此按鈕是上一個按鈕還是下一個按鈕。 使用HTMLButtonElement object 的value屬性可以輕松讀取value屬性（這是<button>的 JS 等效項）。

如果您有任何問題，請務必提出，因為我認為有些事情對您來說可能是新的。

 // The element to display the image with. const imageElement = document.querySelector('.js-image-display'); // The buttons to go previous and next. const imageButtons = document.querySelectorAll('.js-image-control'); // Available sources of images. const imageSources = [ "https://www.placecage.com/c/800/300", "https://www.placecage.com/800/300", "https://www.fillmurray.com/800/300", "https://www.placecage.com/g/800/300", "https://www.fillmurray.com/g/800/300" ]; // Current displayed image. let currentImageIndex = 0; // Variable to store the loop in. let currentLoop; // Show first image and start looping. showCurrentImage(); /** * Cancel previous loop, wait for 2 seconds and call nextImage(). * nextImage() will then call showCurrentImage which will call * loop() again. This will keep the cycle going. */ function loop() { clearTimeout(currentLoop); currentLoop = setTimeout(nextImage, 2000); } /** * Update the src of the imageElement with the * current image index. Then reset the loop. */ function showCurrentImage() { imageElement.src = imageSources[currentImageIndex]; loop(); } /** * Remove 1 from the current image index * or go back to the end. Then show the image. */ function prevImage() { if (currentImageIndex === 0) { currentImageIndex = imageSources.length - 1; } else { currentImageIndex--; } showCurrentImage(); } /** * Add 1 to current image index or go * back to the start. Then show the image. */ function nextImage() { if (currentImageIndex === imageSources.length - 1) { currentImageIndex = 0; } else { currentImageIndex++; } showCurrentImage(); } // Link the prev and next words to their corresponding functions. // This way you don't have to write a lot of if / else statements // to get the function based on the value of the button. const actionMap = { 'prev': prevImage, 'next': nextImage } /** * Decide by reading the value attribute if nextImage or * prevImage should be called. event.currentTarget is one * of the two buttons that you've clicked. It gets the value * and looks up the function to call from the actionMap. * * @param {Event} event Click event triggerd by the buttons. */ function onButtonClick(event) { const value = event.currentTarget.value; const action = actionMap[value]; action(); } // Loop over the buttons and add an click event listener // for each button in the list. In some older browser imageButtons // might not be able to use forEach, so Array.from() turns it // into an array so we know for sure that forEach is possible. Array.from(imageButtons).forEach(function(button) { button.addEventListener('click', onButtonClick); });

 img { max-width: 100%; height: auto; }

 <.-- Prev button --> <button class="js-image-control" value="prev">Previous</button> <!-- Image --> <img class="js-image-display" src="image1.png" width="800" height="300"/> <!-- Next button --> <button class="js-image-control" value="next">Next</button>

使用 javascript 在圖像之間切換

問題描述

3 個解決方案

解決方案1
0 2020-12-07 20:57:43

解決方案2
0 已采納 2020-12-07 21:24:39

所以我想你想要一個按鈕來跳過圖像和一個按鈕來帶來上一個圖像。

解決方案3
0 2020-12-08 07:18:06

使用 javascript 在圖像之間切換

問題描述

3 個解決方案

解決方案1 0 2020-12-07 20:57:43

解決方案2 0 已采納 2020-12-07 21:24:39

所以我想你想要一個按鈕來跳過圖像和一個按鈕來帶來上一個圖像。

解決方案3 0 2020-12-08 07:18:06

解決方案1
0 2020-12-07 20:57:43

解決方案2
0 已采納 2020-12-07 21:24:39

解決方案3
0 2020-12-08 07:18:06