顯示最后一張幻燈片時，如何使此javascript停止

Question

我想在顯示最后一張幻燈片時使此javascript停止，以便下一個按鈕不起作用，但與在顯示第一張幻燈片時的上一個按鈕相同。 對於上一個按鈕，當我按下它並且滑塊在第一張幻燈片上時，我希望它停留在當前幻燈片上。

JavaScript代碼：

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName('slide');
    if (n < 1) {slideIndex = 1;}
    for (i = 0; i < x.length; i++) {
        x[i].style.display = 'none';
    }
    x[slideIndex-1].style.display = 'block';
    }

HTML代碼：

<div class="links-to-wbp">
                    <div class="slide">
                        <a href="/physics/index.html"><img class="wbp" alt="thumb1" src="img/thumb1.png"/></a><a href="/francais/index.html"><img class="wbp" alt="thumb2" src="img/thumb2.png"/></a><a href="/strict/index.html"><img class="wbp" alt="thumb3" src="img/thumb3.png"/></a></div>
                <div class="slide">
                        <img class="wbp" alt="thumb4" src="img/thumb4.png"/><img class="wbp" alt="thumb5" src="img/thumb5.png"/><img class="wbp" alt="thumb6" src="img/thumb6.png"/></div>
                <div class="slide">
                        <img class="wbp" alt="thumb7" src="img/thumb7.png"/><img class="wbp" alt="thumb8" src="img/thumb8.png"/><img class="wbp" alt="thumb9" src="img/thumb9.png"/></div>
                     <div onclick="plusDivs(-1)" class="button previous_button">&#60;</div>
                    <div onclick="plusDivs(+1)" class="button next_button">&#62;</div>
                </div>

Answer 1

我要在顯示最后一張幻燈片時停止此javascript，以使下一個按鈕不起作用。

為此，您可以向showDivs函數添加新的if語句

if (n > x.length) {slideIndex = x.length}

因此您的showDivs函數現在應如下所示：

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName('slide');
    if (n > x.length) {slideIndex = x.length}
    if (n < 1) {slideIndex = 1;}
    for (i = 0; i < x.length; i++) {
        x[i].style.display = 'none';
    }
    x[slideIndex-1].style.display = 'block';
    }

但與顯示第一張幻燈片時的上一個按鈕相同。 對於上一個按鈕，當我按下它並且滑塊在第一張幻燈片上時，我希望它停留在當前幻燈片上。

這應該已經在工作，因為這就是showDiv函數中以下狀態的目的：

如果（n <1）{slideIndex = 1;}

Answer 2

要獲得預期的結果，請在showDivs函數中添加以下行

//add this line to stop after last slide
  if(n > x.length){
      n= slideIndex =x.length;
   }

Codepen- https: //codepen.io/nagasai/pen/vZVeZV

解：

上面提到的解決方案，將檢查下一個值是否大於幻燈片類的計數（在這種情況下為3）

如果大於幻燈片類的數量， 則將 n和slideIndex重置為幻燈片類的長度。

對於第一張幻燈片的上一張幻燈片，已經存在是否可以工作的條件

if (n < 1) {slideIndex = 1;}

Answer 3

您必須檢查slideIndex的值是否大於幻燈片的長度數組，然后將此長度分配給slideIndex。 如果幻燈片索引的值小於1，則將其賦值為1。

像下面這樣的簡單代碼：

function plusDivs(n) {
    slideIndex += n;
    if(slideIndex >= x.length){slideIndex = x.length;}    
    if(slideIndex <=1){slideIndex=1}
    showDivs(slideIndex += n);
}