如何让幻灯片循环回到开头？

我目前正在尝试基于W3Schools.com上提供的示例代码在JavaScript中制作幻灯片。但是，通过此示例幻灯片显示，当最后一页上按下下一个按钮时，它会回到第一页。类似地，当第一页上的前一个按钮被按下时，它将转到最后一页。我希望幻灯片不会在任一方向上循环，因此上一个按钮不起作用或第一页上不存在，下一个按钮不起作用或第一页上不存在。我会怎么做？如何让幻灯片循环回到开头？

（代码是刚刚从W3Schools.com提供的示例代码，因为这是我工作过的。）

<body> 
 

 
<div class="slideshow-container"> 
 

 
<div class="mySlides fade"> 
 
    <div class="numbertext">1/3</div> 
 
    <img src="img_nature_wide.jpg" style="width:100%"> 
 
    <div class="text">Caption Text</div> 
 
</div> 
 

 
<div class="mySlides fade"> 
 
    <div class="numbertext">2/3</div> 
 
    <img src="img_fjords_wide.jpg" style="width:100%"> 
 
    <div class="text">Caption Two</div> 
 
</div> 
 

 
<div class="mySlides fade"> 
 
    <div class="numbertext">3/3</div> 
 
    <img src="img_mountains_wide.jpg" style="width:100%"> 
 
    <div class="text">Caption Three</div> 
 
</div> 
 

 
<a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
 
<a class="next" onclick="plusSlides(1)">&#10095;</a> 
 

 
</div> 
 
<br> 
 

 
<div style="text-align:center"> 
 
    <span class="dot" onclick="currentSlide(1)"></span> 
 
    <span class="dot" onclick="currentSlide(2)"></span> 
 
    <span class="dot" onclick="currentSlide(3)"></span> 
 
</div> 
 

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

 
function plusSlides(n) { 
 
    showSlides(slideIndex += n); 
 
} 
 

 
function currentSlide(n) { 
 
    showSlides(slideIndex = n); 
 
} 
 

 
function showSlides(n) { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("dot"); 
 
    if (n > slides.length) {slideIndex = 1}  
 
    if (n < 1) {slideIndex = slides.length} 
 
    for (i = 0; i < slides.length; i++) { 
 
     slides[i].style.display = "none"; 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
     dots[i].className = dots[i].className.replace(" active", ""); 
 
    } 
 
    slides[slideIndex-1].style.display = "block"; 
 
    dots[slideIndex-1].className += " active"; 
 
} 
 
</script> 
 

 
</body>

来源

2017-04-24 kuwaly

请在堆栈溢出问题之前尝试并调试JavaScript。这会告诉你，slideIndex会在极端情况下重置。 –

只是删除了复位代码和离开，如果ñ< 1或>比滑动

// if (n > slides.length) {slideIndex = 1} // code to check end  
// if (n < 1) {slideIndex = slides.length} // code to check beginning 

if (n>slides.length || n<1) return; // my addition to not execute if either

var slideIndex = 1; 
 
showSlides(slideIndex); 
 

 
function plusSlides(n) { 
 
    showSlides(slideIndex += n); 
 
} 
 

 
function currentSlide(n) { 
 
    showSlides(slideIndex = n); 
 
} 
 

 
function showSlides(n) { 
 
    var i, slides = document.getElementsByClassName("mySlides"); 
 

 
    if (n > slides.length || n < 1) return; 
 
    var dots = document.getElementsByClassName("dot"); 
 
    // if (n > slides.length) {slideIndex = 1}  
 
    // if (n < 1) {slideIndex = slides.length} 
 
    for (i = 0; i < slides.length; i++) { 
 
    slides[i].style.display = "none"; 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
    dots[i].className = dots[i].className.replace(" active", ""); 
 
    } 
 
    slides[slideIndex - 1].style.display = "block"; 
 
    dots[slideIndex - 1].className += " active"; 
 
}

<body> 
 

 
    <div class="slideshow-container"> 
 

 
    <div class="mySlides fade"> 
 
     <div class="numbertext">1/3</div> 
 
     <img src="img_nature_wide.jpg" style="width:100%"> 
 
     <div class="text">Caption Text</div> 
 
    </div> 
 

 
    <div class="mySlides fade"> 
 
     <div class="numbertext">2/3</div> 
 
     <img src="img_fjords_wide.jpg" style="width:100%"> 
 
     <div class="text">Caption Two</div> 
 
    </div> 
 

 
    <div class="mySlides fade"> 
 
     <div class="numbertext">3/3</div> 
 
     <img src="img_mountains_wide.jpg" style="width:100%"> 
 
     <div class="text">Caption Three</div> 
 
    </div> 
 

 
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
 
    <a class="next" onclick="plusSlides(1)">&#10095;</a> 
 

 
    </div> 
 
    <br> 
 

 
    <div style="text-align:center"> 
 
    <span class="dot" onclick="currentSlide(1)"></span> 
 
    <span class="dot" onclick="currentSlide(2)"></span> 
 
    <span class="dot" onclick="currentSlide(3)"></span> 
 
    </div>

来源

2017-04-24 17:10:07 mplungjan

添加删除这些行的原因是，您正在检查以查看当前索引（'n'）是否超出下限或上限可能会有所帮助。在这种情况下，边界是“第一个”和“最后一个”幻灯片。没有“幻灯片0”，当然没有超出最后一张幻灯片。因此，这两行将您的幻灯片计数（再次，'n'）重新设置为1的起始索引或将它包裹到最后一张幻灯片（这是slide.length'末尾的幻灯片编号） – armadadrive

完成........... – mplungjan

如何让幻灯片循环回到开头？

回答

相关问题