javascript - 两次循环后停止 W3 Css-Javascript slider

Question

我正在尝试借助 W3 CSS 和一些 javascript 制作一个包含 5 张图片的 slider 。我希望 slider 在第一张幻灯片的 2 个循环后停止，并且第一张幻灯片应保持静止。之后，用户应该能够使用上一张幻灯片 和下一张幻灯片 的手动按钮。我是 javascript 的新手，无法做到这一点。请帮忙。

以下是我的代码(jsfiddle at https://jsfiddle.net/dofhergw/)-

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-content w3-display-container " style="max-width:500px">

<div class="w3-display-container w3-animate-fading mySlides">
  <a href="" target="_blank" title="slide1">
  <img class="" src="img01.jpg" style="width:100%">
  </a>
  <div class="w3-display-bottomleft w3-large w3-container w3-padding-
  16 w3-black">
    <a href="" 
  target="_blank" title="slide1">Slide-1 (read more)</a>
  </div>
</div>
.....
.....

<div class="w3-display-container w3-animate-fading mySlides">
        <a href="" target="_blank" title="slide5">
        <img class="" src="img05.jpg" style="width:100%">
        </a>
          <div class="w3-display-middle w3-large w3-container   
             w3-padding-16 w3-black">
            <a href="" target="_blank" title="slide5">Slide-5 (read more)
      </a>
          </div>
</div>

<button class="w3-button w3-display-left w3-black" 
onclick="plusDivs(-1)">&#10094;</button>
        <button class="w3-button w3-display-right w3-black" 
onclick="plusDivs(1)">&#10095;</button>

</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 9000);  

}
</script>

Answer 1

您的轮播使用 setTimeout 每 9 秒(9000 毫秒)重复一次。您可以添加一个计数器:

var myIndex = 0;
var counter = 0;
var maxLength = 0;
var loops = 2;
var interval = 1000; //for testing purposes
function carousel() {
  var x = document.querySelectorAll(".mySlides"); //using modern querySelectorAll
  maxLength = x.length * loops; //times 2 for two loops    

  //optimalization here - borrowing Array forEach to loop over node list
  Array.prototype.forEach.call(x, function(element) {
    element.style.display = "none";
  });

  counter++; //adding counter
  if (myIndex >= x.length) {
    myIndex = 0
  }; //reset this to zero indexing
  x[myIndex].style.display = "block"; //show the slide
  if (counter <= maxLength) //ie counter <= 10, execute 
  {
    myIndex++; //add index with every pass
    setTimeout(carousel, interval);
  }
  else
  {
    Array.prototype.forEach.call(x, function(element) {
     element.classList.remove("w3-animate-fading"); //remove the fading
   });  
  }
  

}

carousel();

.w3-content.w3-display-container {
  margin-top: 100px;
}

button.w3-button.w3-display-left.w3-black {
  position: relative;
  left: -50px;
}

button.w3-button.w3-display-right.w3-black {
  position: relative;
  right: -118px;
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w3-content w3-display-container " style="max-width:150px">

  <div class="w3-display-container w3-animate-fading mySlides">
    <a href="" target="_blank" title="slide1">
      <img class="" src="img01.jpg" style="width:100%">
    </a>
    <div class="w3-display-bottomleft w3-large 	w3-container w3- padding-16 w3-black">
      <a href="" target="_blank" title="slide1">Slide-1 (read more)</a>
    </div>
  </div>

  <div class="w3-display-container w3-animate-fading mySlides">
    <a href="" target="_blank" title="slide2">
      <img class="" src="img02.jpg" style="width:100%">
    </a>
    <div class="w3-display-bottomright w3-large w3-container w3-padding-16     w3-black">
      <a href="" target="_blank" title="slide2">Slide-2 (more)</a>
    </div>
  </div>

  <div class="w3-display-container w3-animate-fading mySlides">
    <a href="" target="_blank" title="slide3">
      <img class="" src="img03.jpg" style="width:100%">
    </a>
    <div class="w3-display-topleft w3-large w3-container 
           w3-padding-16 w3-black">
      <a href="" target="_blank" title="slide3">Slide-3 (read more)</a>
    </div>
  </div>

  <div class="w3-display-container w3-animate-fading mySlides">
    <a href="" target="_blank" title="slide4">
      <img class="" src="img04.jpg" style="width:100%">
    </a>
    <div class="w3-display-topright w3-large w3-container 
           w3-padding-16 w3-black">
      <a href="" target="_blank" title="slide4">Slide-4 (read more)</a>
    </div>
  </div>

  <div class="w3-display-container w3-animate-fading mySlides">
    <a href="" target="_blank" title="slide5">
      <img class="" src="img05.jpg" style="width:100%">
    </a>
    <div class="w3-display-middle w3-large w3-container  	
           w3-padding-16 w3-black">
      <a href="" target="_blank" title="slide5">Slide-5 (read	more)</a>
    </div>
  </div>

  <button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">&#10095;</button>

</div>

当达到计数器时，轮播功能将不再设置执行。