在兩個循環之後停止W3 Css-Javascript滑塊

Question

我想在W3 CSS和一些javascript的幫助下製作一個具有5個圖像的滑塊。我希望滑塊在第一張幻燈片的2個循環後停止，並且第一張幻燈片應保持靜止。之後，用戶應該能夠使用previous slide和next slide的手動按鈕。我是JavaScript新手，無法做到這一點。請幫忙。

以下是我的代碼（在的jsfiddle 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

你的旋轉木馬重演每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; 
 
}

<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 \t 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 \t 
 
      w3-padding-16 w3-black"> 
 
     <a href="" target="_blank" title="slide5">Slide-5 (read \t 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>

當到達櫃檯，輪播功能將不會被設置爲再被執行。