Question

我正在使用纯JavaScript制作滑块我想念的部分是。当我在第一个元素上并单击上一个按钮时，移至最后一个元素我试图将Modulus与多个选项（例如元素的长度）一起使用，但没有用。我知道此修复程序与Modulus有关，但可以找出缺少的内容。问题所在是此注释下的代码（//单击时，上一个按钮移到上一个元素。）

注意：我实现了下一个按钮部分，即单击时显示的最后一个元素将移动到第一个元素。

HTML：

<div id="sliderContainer"></div>

    <div class="buttonsCont">
        <button id="previous">Previous</button>
        <button id="next">Next</button>
    </div>

JS：

(function(){

/***********************VARS************************/
let arrImgs , arrImgsTitle , arrImgsLength , i , mainDiv , createDiv , createDivID, incr, createDivContent,
createDivImg , createDivImgTitle , add , sliderDiv , newSliderDiv , createDivClass, next, previous, 
j , k;

arrImgs = [
    {
        src : 'building1.jpg',
        title : 'tall building'
    },
    {
        src : 'fox.jpg',
        title : 'orange fox'
    },
    {
        src : 'nature1.jpeg',
        title : 'water fall'
    },
    {
        src : 'sun.jpg',
        title : 'flame'
    },
    {
        src : 'sunset1.jpg',
        title : 'ghorob gamel'
    }
]

//length of the array
arrImgsLength = arrImgs.length;

//getting the main container div
mainDiv = document.getElementById('sliderContainer');

//variable used to add unique ID to every div
incr = 0

//create many divs same as the length of the array

for(i = 0 ; i < arrImgsLength ; i++) {

    createDiv = document.createElement('div');
    createDivID = createDiv.setAttribute('id' , 'slid' + incr++);
    createDivClass = createDiv.setAttribute('class' , 'show');

    //create image inside each div
    createDivImg = document.createElement('img');
    createDiv.appendChild(createDivImg)


    //append created divs inside main div
    mainDiv.appendChild(createDiv);

    //add images to divs
    createDivContent = createDivImg.src = './imgs/' + arrImgs[i].src
    createDivImgTitle = createDivImg.setAttribute('title' , arrImgs[i].title);

}

//hide all divs except for first one 

add = 0;
sliderDiv = document.querySelector("div#slid" + add);

let getDivs = function(sliderDiv){
    let sliderEmArr = [];
    let sibling = sliderDiv.parentNode.firstChild;

    while(sibling) {
        if(sibling.nodeType === 1 && sibling !== sliderDiv) {
            sliderEmArr.push(sibling);

            if(sibling.classList.contains('show')){
                sibling.setAttribute('class' , 'hide');
            }
        }
        sibling = sibling.nextSibling;
    }   
    return sliderEmArr;
}
let siblings = getDivs(sliderDiv);

//when next button clicked and when reach the last element go to //first;
next = document.getElementById('next');

next.addEventListener("click" , nextSlide);

function nextSlide(){
     for(j = 0 ; j < arrImgsLength; j++){
        newSliderDiv = document.querySelector('div#slid' + j);

        if(!newSliderDiv.classList.contains('hide')){
            newSliderDiv.setAttribute('class', 'hide');
            let nextEl = document.querySelector('div#slid' + ++j % arrImgsLength);
            nextEl.setAttribute('class' , 'show');   
        }
     }   
}


//previous button when clicked move to the previous element.

previous = document.getElementById('previous');
previous.addEventListener('click' , prevSlide);

function prevSlide(){
    for(k = arrImgsLength -1; k >= 0  ; k--) {
        newSliderDiv2 = document.querySelector('div#slid' + k);

        if(!newSliderDiv2.classList.contains('hide')){
            newSliderDiv2.setAttribute('class' , 'hide');

            let prevEl = document.querySelector('div#slid' + --k  ) ;
            prevEl.setAttribute('class' , 'show')
        }
    }
}

})();

Answer 1

您正在此处显示“上一张幻灯片”：

let prevEl = document.querySelector('div#slid' + --k  );
prevEl.setAttribute('class' , 'show');

检查k！= 0;如果不为0，则正常进行。如果为0，请使用最后一项的索引。

let prevEl = document.querySelector('div#slid' + (k ? --k : arrImgsLength - 1));
prevEl.setAttribute('class' , 'show');

单击第一个元素时的JavaScript滑块移动到最后一个元素

1 个答案: