停止我的滑块在最后一张图片使用javascript

我是一个JavaScript的初学者，我正在寻找一种解决方案，以停止我的滑块后的最后一张照片。以下代码显示了有关它的当前代码。大部分来自w3schools。停止我的滑块在最后一张图片使用javascript

var slideIndex = 1; 
showSlides(slideIndex); 

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

function startbild(){ 
    var slides = document.getElementsByClassName("mySlides"); 
    if(slides == 0){} else{ 
    slides[0].style.display = "block"; 
    for (i = 1; i < slides.length; i++) { 
    slides[i].style.display = "none"; 
    document.getElementById("dia-shows").innerHTML = 1; 
    } 
    } 
} 

function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    if (n > slides.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = slides.length} 
    for (i = 0; i < slides.length; i++) { 
    slides[i].style.display = "none"; 
    } 
    slides[slideIndex-1].style.display = "block"; 
    document.getElementById("dia-shows").innerHTML = slideIndex; 
    document.getElementById("dia-gesamt").innerHTML = slides.length; 
}

来源

2017-02-19 johny

*如果（幻灯片== 0）{}其他{*更好*如果（幻灯片）{* –

if (n > slides.length) {slideIndex = 1} //if last is reached, restart with first

应该

if (n > slides.length) {slidesIndex=slides.length} //if last is reached, stay at last

你也可以改变

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

要：

function next_prev(n) { 
var slides = document.getElementsByClassName("mySlides"); 
showSlides(slideIndex = Math.min(slideIndex+n,slides.length)); 
}

注：W3Schools的p romotes不良风格的代码，请开始从MDN学习，有更好的+有更好的编码风格+更好的解释。因此，这里是一个改进的代码：

var slideIndex = 1; 
var slides;// no need to redefine in every function 

function init(){ 
    slides = document.getElementsByClassName("mySlides");//get the slides, store in variable 
    if(!slides){ 
     return console.error("no slides.."); 
    } 
    showSlides();//show the first time 
    setInterval(next_prev,1000,1);//demo (every 1000ms increase with 1) 
} 
window.onload=init;//if page loaded, init 

function next_prev(n) { 
    slideIndex=Math.max(Math.min(slideIndex+n,slides.length),1);// slidesIndex stays between slides.length and 1. 
    showSlides(); 
} 

function showSlides() {//no need to pass n, its equal to slideIndex 
    for (var i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; //hide all 
    } 
    slides[slideIndex-1].style.display = "block";//show one 
    document.getElementById("dia-shows").innerHTML = slideIndex; 
    document.getElementById("dia-gesamt").innerHTML = slides.length; 
}

- >https://developer.mozilla.org/de/docs/Web/JavaScript

来源

2017-02-19 13:36:46

Ty，那有效！ – johny

@johny欢迎;）请在某处打勾绿色的勾号... –

我想，你的代码是不完整的。你可以发表一个有效的例子，而不是发生问题的地方？

改变

if (n < 1) {slideIndex = slides.length} 
if (n > slides.length) {slideIndex = 1}

到

if (n < 1) { 
    slideIndex = 1; 
} else if (n > slides.length) { 
    slideIndex = slides.length; 
} else { 
    slideIndex = n; 
}

应该做你在两个方向上想要的东西。

当第一帧或最后一帧可见时，应隐藏允许用户再次滑动的相关控件。

每当n被传递超出有效范围时，它将被限制在该范围内。

来源

2017-02-19 13:38:14

停止我的滑块在最后一张图片使用javascript

回答

相关问题