在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 
}