JavaScript幻燈片功能問題

函數plusSlides在我的html中通過onclick調用。 This顯示了我正在使用的類似函數和html。類mySlides持有將在showSlides中顯示的每個n==x的文本。與鏈接中的幻燈片示例不同，當我嘗試點擊onclick="plusSlides(-1)"時，我的功能不起作用。例如，當我在plusSlides(-1)上點擊三次時，aerialMap和fedTiless都被添加，但roadMap不是。有人會知道爲什麼嗎？JavaScript幻燈片功能問題

function roadMap() {  
    map.addLayer(Road); 
    map.removeLayer(febTiles); 

} 
function febTiless() { 

    map.addLayer(febTiles); 
    map.removeLayer(Road); 

} 

function aerialMap() { 

    map.addLayer(Aerial); 
    map.removeLayer(febTiles); 
    map.removeLayer(Road); 
} 


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

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

    var slides = document.getElementsByClassName("mySlides"); 

    if (n > slides.length) {slideIndex = 1}  
    if (n < 1) {slideIndex = slides.length} 
    if(n == 1) 
    aerialMap(); 
    if(n == 2) 
    febTiless(); 
    if(n == 3) 
    roadMap(); 

    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    slides[slideIndex-1].style.display = "block"; 
}

來源

2017-04-06 sergey

嘗試'map.removeLayer（鳥瞰）添加;'向第一兩個函數（'roadMap'和'febTiless'）。也許沒有這些調用可能導致應該可見的圖層被「Aerial」覆蓋。 – trincot

感謝您的評論，但與plusSlides（1）相比，這並不能解決plusSlides（-1）發生故障的問題。 – sergey

該缺陷是在這部分代碼：

if (n > slides.length) {slideIndex = 1}  
if (n < 1) {slideIndex = slides.length} 
if(n == 1) 
    aerialMap(); 
if(n == 2) 
    febTiless(); 
if(n == 3) 
    roadMap();

在頭兩行的slideIndex變量調整（正確地）到循環回到幻燈片數的有效範圍內，但隨後的if條件仍然是基於ñ，其具有不以這種方式被調整，所以ñ將爲0（或4）在某些情況下，然後無ö f if條件將爲true。

所以調整是這樣的：

var slideIndex; 
showSlides(1); 

function plusSlides(n) { 
    showSlides(slideIndex + n); // avoid assignment here 
} 

function currentSlide(n) { 
    showSlides(n); // avoid assignment here 
} 

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

    slideIndex = n; // assign only here, at a single place 
    // Don't use n anymore, only work with slideIndex 
    if (slideIndex > slides.length) {slideIndex = 1}  
    if (slideIndex < 1) {slideIndex = slides.length} 
    if(slideIndex == 1) 
    aerialMap(); 
    if(slideIndex == 2) 
    febTiless(); 
    if(slideIndex == 3) 
    roadMap(); 

    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    slides[slideIndex-1].style.display = "block"; 
}

來源

2017-04-07 06:25:59 trincot

非常感謝！完美工作！ – sergey

JavaScript幻燈片功能問題

回答

相關問題