Question

亲爱的stackoverflow用户，

我正在为自己的项目工作，我遇到了一个js问题。

我试图在我的主页上制作一张有3名员工的幻灯片。

默认显示图像1，图像2和图像3。当我按下后退图标时，我需要去：图4，图像1和图像2。

到目前为止我的代码（仅向后！）

let sliderImages = document.querySelectorAll('.slide');
let arrowBack = document.querySelector('#arrow-back');
let arrowNext = document.querySelector('#arrow-next');
let currentOne = 0;
let currentTwo = 1;
let currentThree = 2;

// Make employees transparent
function reset(){
    for(let i = 0; i < sliderImages.length; i++){
        sliderImages[i].style.display = 'none';
    }
}

// Make employee 1 visable
function startSlide(){
    reset();
    sliderImages[0].style.display = 'inline-block';
    sliderImages[1].style.display = 'inline-block';
    sliderImages[2].style.display = 'inline-block';
}

// Show command backwards
function slideBack(){
    reset();
    sliderImages[currentOne - 1].style.display = 'inline-block';
    sliderImages[currentTwo - 1].style.display = 'inline-block';
    sliderImages[currentThree - 1].style.display = 'inline-block';
    currentOne--;
    currentTwo--;
    currentThree--;
}
// Back arrow clicked
arrowBack.addEventListener('click', function(){
    if(currentOne === 0){
        currentOne = sliderImages.length;
    } 
    if(currentTwo === 0){
        currentTwo = sliderImages.length;
    }
    if(currentThree === 0){
        currentThree = sliderImages.length;
    }
    slideBack();
})

当我刷新页面时，我会看到图像1,2和3，这样就可以了。但是当我按＃arrow-back时，它不会转到4,1和2.

我知道结构并不适合我的3x if，但我只是学习理解Javascript。

你们中的任何人能否给我一些关于我如何推进项目的提示？

非常感谢。

大，

Loxiuras

（请注意，我的HTML工作正常。它会改变图像，但它没有得到正确的顺序。）

用一个按钮更改多个滑块

0 个答案: