2017-04-06 92 views
0

函数plusSlides在我的html中通过onclick调用。 This显示了我正在使用的类似函数和html。类mySlides持有将在showSlides中显示的每个n==x的文本。与链接中的幻灯片示例不同,当我尝试点击onclick="plusSlides(-1)"时,我的功能不起作用。例如,当我在plusSlides(-1)上点击三次时,aerialMapfedTiless都被添加,但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"; 
} 
+0

尝试'map.removeLayer(鸟瞰)添加;'向第一两个函数('roadMap'和'febTiless')。也许没有这些调用可能导致应该可见的图层被“Aerial”覆盖。 – trincot

+0

感谢您的评论,但与plusSlides(1)相比,这并不能解决plusSlides(-1)发生故障的问题。 – sergey

回答

1

该缺陷是在这部分代码:

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"; 
} 
+0

非常感谢!完美工作! – sergey