我的 JavaScript 幻灯片在选择上一个图像后前进一个图像然后返回答案

【问题标题】：My JavaScript slideshow goes forward an image and then back after selecting previous我的 JavaScript 幻灯片在选择上一个图像后前进一个图像然后返回
【发布时间】：2021-11-04 12:30:43
【问题描述】：

我正在创建一个 JavaScript 幻灯片。它在大多数情况下都有效。但是，当在向前移动许多图像后切换回来时，它会向前移动一张图像，然后再返回。当图像 aver 向前切换一段时间时，它也会执行此操作。我不知道这篇文章是否有意义，因为这是一个难以表达的问题。

const nextBtn = document.querySelector("next");
const previousBtn = document.querySelector("previous");
const image = document.getElementById("slideShow");

let imageNumber = 0;

console.log(image.src, imageNumber);

const slideForward = function () {
  image.src = `slide-${imageNumber++}.PNG`;
  console.log(image.src, imageNumber);

  if (imageNumber > slideArray.length - 1) {
    imageNumber = 1;
  }
};

const slideBack = function () {
  image.src = `slide-${imageNumber--}.PNG`;
  console.log(image.src, imageNumber);
  if (imageNumber < 0) {
    imageNumber = slideArray.length - 1;
  }
};

document.addEventListener("keydown", function (q) {
  if (q.key === "ArrowLeft") {
    slideBack();
  }
});

document.addEventListener("keydown", function (q) {
  if (q.key === "ArrowRight") {
    slideForward();
  }
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Days+One&family=Roboto:ital,wght@0,400;1,900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <body  id="picturesStyle" >

    
    <nav class="topnav">
      <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="books.html">Books</a></li>
        <li><a href="movies.html">Movies</a></li>
        <li><a href="videos.html">Videos</a></li>
        <li><a href="pictures.html">Pictures</a></li>
      </ul>
    </nav>

   
    <img width="600" id="slideShow" src="PleaseWork.png" alt="">
    <button class="next" onclick="slideForward()">Next</button>
    <button class="previous" onclick="slideBack()">Previous</button>


    </main>
    <title>SlideShow</title>
    
    <script src="script.js"></script>
  </body>
</html>

【问题讨论】：

我认为您不需要两个“keydown”事件。移动 if (q.key === "ArrowRight") { slideForward();} 和 if (q.key === "ArrowLeft") { slideBack(); } 进入同一个事件

标签： javascript html slideshow

【解决方案1】：

如果我理解正确，我认为您遇到问题的原因是由线条引起的

image.src = `slide-${imageNumber++}.PNG`;

image.src = `slide-${imageNumber--}.PNG`;

if 检查和数组的起始索引。

我愿意这样做

const slideForward = function () {
  if (++imageNumber >= slideArray.length) { //Increase the value first and check it if it is out of range
    imageNumber = 0; //indexes don't start from 1. They start from 0
  }

  image.src = `slide-${imageNumber}.PNG`; 
  console.log(image.src, imageNumber);
};

同样的逻辑也适用于 slideBack 函数

const slideBack = function () {
   if (--imageNumber <= 0) { //Decrease the value first and check it if it is out of range
    imageNumber = slideArray.length - 1;
  }

  image.src = `slide-${imageNumber}.PNG`;
  console.log(image.src, imageNumber);
};

我希望能涵盖你的问题

【讨论】：

【解决方案2】：

请试试这个并反馈它的进展情况：

const slideForward = function () {

  if (imageNumber > slideArray.length - 1) {
    imageNumber = -1;
  }
  imageNumber++;
  image.src = `slide-${imageNumber}.PNG`;
  console.log(image.src, imageNumber);
  
};

const slideBack = function () {
  
  if (imageNumber < 0) {
    imageNumber = slideArray.length;
  }
  imageNumber--;
  image.src = `slide-${imageNumber}.PNG`;
  console.log(image.src, imageNumber);
  
};

【讨论】：

【解决方案3】：

不要增加或减少计数器，除非它在你的幻灯片数组的范围内并且只添加一个“keydown”事件。

const nextBtn = document.querySelector("next");
const previousBtn = document.querySelector("previous");
const image = document.getElementById("slideShow");

let imageNumber = 0;

console.log(image.src, imageNumber);

const slideForward = function () {
    if(imageNumber >= 0 && imageNumber < slideArray.length - 1){
    imageNumber++;
    image.src = `slide-${imageNumber}.PNG`; 
}
console.log(image.src, imageNumber);
};

const slideBack = function () {
    if(imageNumber > 0 && imageNumber <= slideArray.length - 1){
        imageNumber--;
        image.src = `slide-${imageNumber}.PNG`;
    }
    console.log(image.src, imageNumber);
};

document.addEventListener("keydown", function (q) {
  if (q.key === "ArrowLeft") {
    slideBack();
  }
  if (q.key === "ArrowRight") {
    slideForward();
  }  
});

【讨论】：