图片 slider 仅部分工作（Vanilla Javascript）

Question

I am working on a javascript image slider and at the moment the buttons go either forward or backward from the first image or index 0.我正在处理 javascript 图像 slider ，目前按钮 go 从第一个图像或索引 0 向前或向后。

This means if I start with going backward this is what happens 0-3-2-1-NO IMAGES JUST THE BUTTONS and if it is forward 0-1-2-3-NO IMAGES JUST THE BUTTONS It seems the second iteration/looping is not working for some reason I haven't been able to figure out.这意味着如果我从后退开始，这就是发生的情况 0-3-2-1-NO IMAGES Just the Buttons 如果它是前进 0-1-2-3-NO IMAGES Just the Buttons 似乎是第二次迭代/循环由于某种原因我无法弄清楚。

Also, if I start with going forward/backward and try to switch to backward/forward the same problem NO IMAGES JUST THE BUTTONS comes up.此外，如果我从前进/后退开始并尝试切换到后退/前进同样的问题，没有图像只是按钮出现。

I am not sure these two are related so please help.我不确定这两个是否相关，所以请帮忙。 Here is the javascript这是 javascript

let imgEl = document.querySelectorAll("img");
let backBtnEl = document.querySelector(".back-btn");
let forwardBtnEl = document.querySelector(".forward-btn");
let currentIndex = 0;
let lengthImagesEl=imgEl.length;
function showSlide(currentIndex) {
    return imgEl[currentIndex].classList.add("showing");
}

function nextSlide() {
    imgEl[currentIndex].style.display="none";
    currentIndex = (currentIndex + 1) % lengthImagesEl;
    return showSlide(currentIndex);

}

function previousSlide() {
    imgEl[currentIndex].style.display = "none";
    currentIndex = (currentIndex + lengthImagesEl - 1) % lengthImagesEl;
    return showSlide(currentIndex);
 }

backBtnEl.addEventListener("click", previousSlide);
 
forwardBtnEl.addEventListener("click", nextSlide);

Here is the HTML- only the first image link works(apologies)这是 HTML - 只有第一个图片链接有效（道歉）

<!DOCTYPE html>
    <html>
      <head>
        <title>Slideshow</title>
        
        <link
          rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
          crossorigin="anonymous"
        />
        <link rel="stylesheet" href="style.css" />
      </head>
      <body>
        <!-- Write your HTML in here -->
        <div class="img-container">
          <img class ="showing" src="https://images.unsplash.com/photo-1564349683136-77e08dba1ef7?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8cGFuZGFzfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="panda naps on branch">
          <img src="" alt="panda chilling">
          <img src="" alt="panda snack time">
          <img src="" alt="curious panda">
        </div>
        
        <div class="btn-container">
          <button class="back-btn">Back</button>
          <button class="forward-btn">Forward</button>
        </div>
       
        <script src="slideshow.js"></script>
      </body>
    </html>

Here is the CSS这是 CSS

img{
    width:100%;
    height:550px;
    margin:5px;
    display:none;
}
.showing {
    display:block;
}

button {
    display:inline-flex;
    height: 30px;
    background-color:orange;
   }

Answer 1

FIXED It seems once the display is none there was no way it was going back to "showing" so I added one line of code and it worked imgEl[currentIndex].classList.toggle("showing");已修复似乎一旦显示不显示，它就无法返回“显示”，所以我添加了一行代码，它工作了 imgEl[currentIndex].classList.toggle("showing"); instead of imgEl[currentIndex].style.display = "none";而不是 imgEl[currentIndex].style.display = "none";

图片 slider 仅部分工作（Vanilla Javascript）

问题描述

1 个解决方案

解决方案1
0 2021-03-18 09:48:02

图片 slider 仅部分工作（Vanilla Javascript）

问题描述

1 个解决方案

解决方案1 0 2021-03-18 09:48:02

解决方案1
0 2021-03-18 09:48:02