使用 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

soo 我想你想要一个按钮来跳过图像和一个按钮来显示上一个图像。

首先声明变量

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

你必须创建一个启动函数，这样你就可以在页面加载或重置计时器时调用它

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

下一个图像函数像

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

以前的图像函数像

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

您正在寻找类似于滑块的功能。您使用 setInterval 显示的第一个片段是一个很好的工作场所。遍历列表使您的代码动态化，并允许添加或删除项目而无需更改太多代码。

我对您提供的代码进行了扩展，并在下方制作了一个可行的代码段。一定要看看。

我使用了 setTimeout 而不是 setInterval。这是因为按钮和循环使用相同的函数来显示当前图像。所以循环将能够再次调用自己。当循环在 2 秒过去之前被调用时，它将被取消并重新开始。单击其中一个按钮时可能会发生这种情况。

我删除了内联 onclick 监听器以支持在 JavaScript 中使用 addEventListener。我建议你采用这种方法。它将允许您重复更少的代码，将您的 JavaScript 放在一个地方并使您的代码更加灵活。
但是，我确实向按钮添加了 value 属性。按钮支持此属性。它可以携带少量信息，比如告诉你这个按钮是上一个还是下一个按钮。 value 属性可以通过 HTMLButtonElement 对象的 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 在图像之间切换

Switching between images using javascript

html

javascript

onclick

soo 我想你想要一个按钮来跳过图像和一个按钮来显示上一个图像。