显示最后一张幻灯片时，如何使此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);
}