Question

我在我的网站上放置了一个图像滑块，以便在点击事件上逐个显示图像，但在最后一个图像上我想要停止图像滑块。我不想再重复一次图像，我不想向前滑动，但我们可以回去。

   <script>    
    var slideIndex = 1;
    showDivs(slideIndex);

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

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

HTML：

    <div class="w3-content w3-display-container"> 
    <div style="margin-left:150px"> 
    <img class="mySlides" src="../../../../../imageslider2/slide1.jpg" style="width:auto; height:auto"/> 
    <img class="mySlides" src="../../../../../imageslider2/slide2.jpg" style="width:auto; height:auto"/> 
    <pre> <a class="w3-btn-floating w3-display-left" onclick="plusDivs(-1)">❮</a> 
    <a class="w3-btn-floating w3-display-right" onclick="plusDivs(1)">❯</a> 
    </div>

Answer 1

首先，您需要计算幻灯片总数并将其设置为变量，您可以使用.length进行操作，然后需要向plusDivs函数添加条件语句如果slideIndex值等于幻灯片总数的值，则执行某些操作（以下示例中的警告）：

var slideIndex = 1,
    totalSlides = document.querySelectorAll('.mySlides').length;
showDivs(slideIndex);

function plusDivs(n) {
  if (slideIndex === totalSlides) {
    alert('End of slideshow');
  } else {
    showDivs(slideIndex += n);
  }
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) { slideIndex = 1 }
  if (n < 1) { slideIndex = x.length }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}

<div class="w3-content w3-display-container"> 
  <div style="margin-left:150px"> 
    <img class="mySlides" src="http://placehold.it/250x250" style="width:auto; height:auto"/> 
    <img class="mySlides" src="http://placehold.it/250x250/000/fff" style="width:auto; height:auto"/> 
    <pre><a href="#" class="w3-btn-floating w3-display-left" onclick="plusDivs(-1)">❮</a> 
    <a href="#" class="w3-btn-floating w3-display-right" onclick="plusDivs(1)">❯</a> </pre>
  </div>
</div>

或者，如果它们位于幻灯片的开头或结尾，您可以使用相同的方法隐藏上一个或下一个按钮。

如何在jquery中停止最后一个图像上的图像滑块前进按钮

1 个答案: