在javascript幻灯片中显示第4张幻灯片

Question

我一直致力于使用幻灯片显示不同元素的JavaScript程序。截至目前，我的程序正确显示了3张幻灯片，但没有显示第四张幻灯片。我仍然难以理解它为什么这样做。

下面是代码：

$(function() { 
 
    var points = 5; 
 
    points++; 
 
    $("#draggable").draggable(); 
 

 

 
    $("#droppable").droppable({ 
 
    tolerance: 'pointer', 
 
    drop: function(event, ui) { 
 
     $(this) 
 
     .addClass("second_class") 
 
     .find("p") 
 
     .html(alert(points--)); 
 
    } 
 
    }); 
 
    $("#droppable2").droppable({ 
 
    tolerance: 'pointer', 
 
    greedy: false, 
 
    drop: function(event, ui) { 
 
     $(this) 
 

 
     .find("p") 
 

 
     .html(alert(points++)); 
 

 
    }, 
 

 
    over: function(event, ui) { 
 
     $("#droppable").droppable("disable") 
 

 
    }, 
 
    over: function(event, ui) { 
 
     $("#droppable").droppable("enable") 
 

 
    } 
 

 

 
    }); 
 
}); 
 
$(function() { 
 
    var points = 5; 
 
    points++; 
 
    $("#draggable2").draggable(); 
 

 

 
    $("#droppable3").droppable({ 
 
    tolerance: 'pointer', 
 
    drop: function(event, ui) { 
 
     $(this) 
 
     .addClass("second_class") 
 
     .find("p") 
 
     .html(alert(points--)); 
 
    } 
 
    }); 
 
    $("#droppable4").droppable({ 
 
    tolerance: 'pointer', 
 
    greedy: false, 
 
    drop: function(event, ui) { 
 
     $(this) 
 

 
     .find("p") 
 

 
     .html(alert(points++)); 
 

 
    }, 
 

 
    over: function(event, ui) { 
 
     $("#droppable3").droppable("disable") 
 

 
    }, 
 
    over: function(event, ui) { 
 
     $("#droppable3").droppable("enable") 
 

 
    } 
 

 

 
    }); 
 
}); 
 
$(function() { 
 
    var points = 5; 
 
    points++; 
 
    $("#draggable5").draggable(); 
 

 

 
    $("#droppable6").droppable({ 
 
    tolerance: 'pointer', 
 
    drop: function(event, ui) { 
 
     $(this) 
 
     .addClass("second_class") 
 
     .find("p") 
 
     .html(alert(points--)); 
 
    } 
 
    }); 
 
    $("#droppable6").droppable({ 
 
    tolerance: 'pointer', 
 
    greedy: false, 
 
    drop: function(event, ui) { 
 
     $(this) 
 

 
     .find("p") 
 

 
     .html(alert(points++)); 
 

 
    }, 
 

 
    over: function(event, ui) { 
 
     $("#droppable5").droppable("disable") 
 

 
    }, 
 
    over: function(event, ui) { 
 
     $("#droppable5").droppable("enable") 
 

 
    } 
 

 

 
    }); 
 
}); 
 

 
$("#open_popup").click(function() { 
 
    $("#popup").css("display", "block"); 
 
    
 
}); 
 

 
$("#close_popup").click(function() { 
 
    $("#popup").css("display", "none"); 
 
}); 
 
$("#open_popup2").click(function() { 
 
    $("#popup2").css("display", "block"); 
 
    
 
}); 
 

 
$("#close_popup2").click(function() { 
 
    $("#popup2").css("display", "none"); 
 
}); 
 
$("#open_popup3").click(function() { 
 
    $("#popup2").css("display", "block"); 
 
    
 
}); 
 

 
$("#close_popup3").click(function() { 
 
    $("#popup2").css("display", "none"); 
 
}); 
 

 
var slideIndex = 0; 
 
showSlides(); 
 

 
function showSlides() { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("dot"); 
 
    for (i = 0; i < slides.length; i++) { 
 
    slides[i].style.display = "none"; 
 
    } 
 
    slideIndex++; 
 
    if (slideIndex > slides.length) { 
 
    slideIndex = 1 
 
    } 
 

 

 
    for (i = 0; i < dots.length; i++) { 
 
    dots[i].className = dots[i].className.replace(" active", ""); 
 
    } 
 
    slides[slideIndex - 1].style.display = "block"; 
 
    dots[slideIndex - 1].className += " active"; 
 
    setTimeout(showSlides, 2000); // Change image every 10 seconds 
 
} 
 

 
var playing = true; 
 
var pauseButton = document.getElementById('pause'); 
 

 
function pauseSlideshow() { 
 
    pauseButton.innerHTML = 'Play'; 
 
    playing = false; 
 
    clearInterval(slideIndex); 
 
} 
 

 
function playSlideshow() { 
 
    pauseButton.innerHTML = 'Pause'; 
 
    playing = true; 
 

 
    setTimeout(showSlides, 3000); 
 
} 
 

 

JSFiddle

Answer 1

为什么它没有显示的原因是，在申报单并没有被勒令正确，使得你的第三个“mySlides” div实际上包含你的第四个。因此，当您将第四个div设置为display：block时，它将不会显示。

我已经删除了所有的点击处理程序和类似的东西，你可以看到它在下面的小提琴工作。对未来的建议是改变图像，使它们在视觉上截然不同，因为我认为你的第三和第四张图像看起来非常相似。

另一个技巧是将document.getElementsByClassName选择器移动到函数外部，以便只执行一次，因为它们执行速度慢。

由于您已经在使用jquery了......为什么不使用jquery转盘？ http://kenwheeler.github.io/slick/

http://jsfiddle.net/rA4CB/189/

var slideIndex = 0; 
var slides = document.getElementsByClassName("mySlides"); 
var dots = document.getElementsByClassName("dot"); 

showSlides(); 

function showSlides() { 
    for (var i = 0; i < slides.length; i++) { 
    if(i !== slideIndex){ 
     slides[i].style.display = "none"; 
    } else{ 
     slides[i].style.display = "block"; 
    } 
    } 
    slideIndex++; 
    if (slideIndex > slides.length) { 
    slideIndex = 0; 
    } 

    setTimeout(showSlides, 2000); // Change image every 10 seconds 
}