使用圖像輪播中的下一個/上一個按鈕重復單擊

Question

我最近為我們的網站構建了一個 6 圖像輪播。 我希望它在輪播中的第一個和最后一個圖像上時隱藏下一個/上一個按鈕。

輪播最初加載正確。 但是，點擊后，它會為最后一張圖片分配額外的點擊。 如果我 go 從最后一張圖像倒退到第一張圖像，它會做同樣的事情。 它顯示第一張/最后一張圖像，我按下按鈕，然后它顯示相同的圖像但按鈕消失了。

我希望按鈕在第一次顯示第一張/最后一張圖像時消失。 有多余的點擊。 我似乎無法弄清楚是什么原因造成的。

這是我懷疑導致問題的代碼片段：

 var counter = 0; if (counter === 0) { prevBtn.style.display = "none"; } if (counter === myimages.length-1) { nextBtn.style.display = "none"; } prevBtn.addEventListener("click", function(){ if (counter > 0 && counter < myimages.length){ counter--; myimage = myimages[counter]; mycaption = mycaptions[counter]; imageContainer.innerHTML = '<img src="'+myimage+'" />'; captionContainer.innerHTML = mycaption; prevBtn.style.display = "block"; nextBtn.style.display = "block"; } else if (counter === 0) { prevBtn.style.display = "none"; } }); nextBtn.addEventListener("click", function(){ if (counter < myimages.length-1){ counter++; myimage = myimages[counter]; mycaption = mycaptions[counter]; imageContainer.innerHTML = '<img src="'+myimage+'" />'; captionContainer.innerHTML = mycaption; prevBtn.style.display = "block"; nextBtn.style.display = "block"; } else if (counter === myimages.length-1) { nextBtn.style.display = "none"; } });

這是完整的代碼，所以你可以自己看看我在說什么：

 // Declaring variable array of images. You can put as many as you want. const myimages = ["https://i.imgur.com/wv4IFTH.jpeg", "https://i.imgur.com/e9rdR6C.jpeg", "https://i.imgur.com/008kJgA.jpeg", "https://i.imgur.com/GBLGV8F.jpeg", "https://i.imgur.com/TuatGBH.jpeg", "https://i.imgur.com/niI3Ye6.jpeg"]; const mycaptions = ["Test Caption 1", "Test Caption 2", "Test Caption 3", "Test Caption 4", "Test Caption 5", "Test Caption 6"]; const prevBtn = document.getElementById("p-10-sis-prev-btn"); // assigning variable for previous button const nextBtn = document.getElementById("p-10-sis-next-btn"); // assigning variable for next button const imageContainer = document.getElementById("p-10-sis-image-container"); // assigning variable for image container div const captionContainer = document.getElementById("p-11-sis-caption-place-holder"); var myimage = myimages[0]; // Assigning initial value for the varibale to show on page loading and showing first image. var mycaption = mycaptions[0]; // Assigning and showing the first caption of the first image. imageContainer.innerHTML = '<img src="'+myimage+'" />'; captionContainer.innerHTML = mycaption; var counter = 0; if (counter === 0) { prevBtn.style.display = "none"; } if (counter === myimages.length-1) { nextBtn.style.display = "none"; } prevBtn.addEventListener("click", function(){ if (counter > 0 && counter < myimages.length){ counter--; myimage = myimages[counter]; mycaption = mycaptions[counter]; imageContainer.innerHTML = '<img src="'+myimage+'" />'; captionContainer.innerHTML = mycaption; prevBtn.style.display = "block"; nextBtn.style.display = "block"; } else if (counter === 0) { prevBtn.style.display = "none"; } }); nextBtn.addEventListener("click", function(){ if (counter < myimages.length-1){ counter++; myimage = myimages[counter]; mycaption = mycaptions[counter]; imageContainer.innerHTML = '<img src="'+myimage+'" />'; captionContainer.innerHTML = mycaption; prevBtn.style.display = "block"; nextBtn.style.display = "block"; } else if (counter === myimages.length-1) { nextBtn.style.display = "none"; } });

 .p-10-sis-page-background{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }.p-10-simple-image-slider-wrapper{ max-width: 45%; height: auto; display: flex; flex-direction: row; align-items: center; justify-content: center margin-bottom: 20px; } #p-10-sis-image-container{ max-width: 100%; height: auto; display: flex; justify-content: center } #p-10-sis-image-container img{ max-width: 90%; justify-content: center; height: auto; display: flex; align-items: center; animation: p-10-image-animation 1s; } #p-10-sis-prev-btn, #p-10-sis-next-btn{ width: 50px; font-family: 'Open Sans', sans-serif; font-size: 50px; display: flex; flex: 1; align-items: center; justify-content: center; cursor: pointer; color: orange; } #p-10-sis-prev-btn:hover, #p-10-sis-next-btn:hover{ transition: all 1s; }.p-10-sis-page-background h1{ color: rgb(243, 236, 176); } @keyframes p-10-image-animation{ 0%{ opacity: 0.5; } 100%{ opacity: 1; } } #p-11-sis-caption-place-holder{ padding: 5px 150px 5px 150px; font-family: 'Open Sans', sans-serif; color: #565555; text-align: left; font-size: 18px; line-height: 150%; margin-bottom: 20px; }

 <div class="p-10-sis-page-background"> <div class="p-10-simple-image-slider-wrapper"> <div id="p-10-sis-prev-btn">&#60;</div> <div id="p-10-sis-image-container" ></div> <div id="p-10-sis-next-btn">&#62;</div> </div> <div id="p-11-sis-caption-place-holder"> </div> </div>

Answer 1

正如 Noam 評論的那樣，當您將 else if 語句與前面的 if 語句分組時，會發生以下情況：

當您在第一張幻燈片上時，計數器被設置為零，但隨后不執行 else 語句。 當您再次單擊上一個按鈕時，這個時間計數器已經為零，因此 else 部分被執行並且按鈕被隱藏。 當您在最后一張幻燈片上時，也會發生同樣的事情。

解決方案：包含另一個 if else 語句來設置主 if 塊內按鈕的顯示屬性

prevBtn.addEventListener("click", function(){
    if (counter > 0 && counter < myimages.length){
            counter--;
            myimage = myimages[counter];
            mycaption = mycaptions[counter];
            imageContainer.innerHTML = '<img src="'+myimage+'" />';
            captionContainer.innerHTML = mycaption;
            if (counter === 0) {
              prevBtn.style.display = "none";
            }
            else {
              prevBtn.style.display = "block";
              nextBtn.style.display = "block";
            };
        }
    });

nextBtn.addEventListener("click", function(){
    if (counter < myimages.length-1){
        counter++;
        myimage = myimages[counter];
        mycaption = mycaptions[counter];
        imageContainer.innerHTML = '<img src="'+myimage+'" />';
        captionContainer.innerHTML = mycaption;
        if (counter === myimages.length - 1) {
            nextBtn.style.display = "none";
        }
        else {
          prevBtn.style.display = "block";
          nextBtn.style.display = "block";
        };
    }
});