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幻灯片功能问题

回答

相关问题