停止我的滑塊在最後一張圖片使用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

回答

相關問題