图像轮播中带有 next/previous 按钮的冗余点击

Question

我最近为我们的网站构建了一个 6 图像轮播。我希望它在轮播中的第一张和最后一张图片上时隐藏 next/previous 按钮。

轮播最初加载正确。但是，点击后，它会为最后一张图片分配额外的点击次数。如果我从最后一张图片倒退到第一张，它会做同样的事情。它显示 first/last 图像，我点击按钮，然后它显示相同的图像，但按钮消失了。

我希望按钮在第一次显示 first/last 图像时消失。有一个多余的点击。我似乎无法弄清楚是什么原因造成的。

这是我怀疑导致问题的代码片段：

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-s-i-s-prev-btn");  // assigning variable for previous button
    const nextBtn = document.getElementById("p-10-s-i-s-next-btn");  // assigning variable for next button
    const imageContainer = document.getElementById("p-10-s-i-s-image-container"); // assigning variable for image container div
    const captionContainer = document.getElementById("p-11-s-i-s-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-s-i-s-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-s-i-s-image-container{
        max-width: 100%;
        height: auto;
        display: flex;
        justify-content: center
    }

    #p-10-s-i-s-image-container img{
        max-width: 90%;
        justify-content: center;
        height: auto;
        display: flex;
        align-items: center;
        animation: p-10-image-animation 1s;
        
    }

    #p-10-s-i-s-prev-btn, #p-10-s-i-s-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-s-i-s-prev-btn:hover, #p-10-s-i-s-next-btn:hover{
        
        transition: all 1s;
        
    }

    .p-10-s-i-s-page-background h1{
        color: rgb(243, 236, 176);
    }

    @keyframes p-10-image-animation{
        0%{
            opacity: 0.5;
        }
        100%{
            opacity: 1;
        }
    }

    #p-11-s-i-s-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-s-i-s-page-background">
        
      
      <div class="p-10-simple-image-slider-wrapper">
            <div id="p-10-s-i-s-prev-btn">&#60;</div>
            <div id="p-10-s-i-s-image-container" ></div>
            <div id="p-10-s-i-s-next-btn">&#62;</div>
        </div>
      <div id="p-11-s-i-s-caption-place-holder">
        </div>
    </div>

Answer 1

正如 Noam 评论的那样，当您将 else if 语句与前面的 if 语句组合在一起时，会发生以下情况：

当您在第一张幻灯片上时，计数器设置为零，但不会执行 else 语句。当你再次点击上一个按钮时，这个时间计数器已经为零，所以 else 部分被执行并且按钮被隐藏。当你在最后一张幻灯片上时，同样的事情也会发生。

解决方案: 在主if块

中包含另一个if else语句来设置按钮的显示属性

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";
        };
    }
});

图像轮播中带有 next/previous 按钮的冗余点击

Redundant click with next/previous buttons in image carousel

javascript

html

css

function

counter