Question

我试图在W3 CSS和一些javascript的帮助下制作一个有5个图像的滑块。我希望滑块在第一张幻灯片的2个循环后停止，第一张幻灯片应保持静态。之后，用户应该可以使用previous slide和next slide的手动按钮。我是javascript的新手，无法做到这一点。请帮忙。

以下是我的代码（https://jsfiddle.net/dofhergw/处的jsfiddle） -

<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

您的轮播使用a.map({ item -> if (item > 100) item / 1000 else item })每9秒（9000毫秒）重复一次。您可以添加一个计数器：

setTimeout

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

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

两个循环后停止W3 Css-Javascript滑块

1 个答案: