javascriptスライドショーで4番目のスライドを表示

Question

スライドショーを使用してさまざまな要素を表示するjavascriptプログラムで作業しています。現在のところ、私のプログラムは正しく3つのスライドを正しく表示しますが、4番目のスライドは表示しません。私はまだこれをやっている理由について困っている。ここで

はコードです：

$(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

それが表示されていない理由は、div要素が適切な発注されていないということであるあなたの第三「mySlides」 divには実際に4番目のものが含まれています。したがって、4番目のdivをdisplay：blockに設定すると、表示されません。

私はすべてのクリックハンドラを削除しました。そのようなことは、下のフィドルで動作することがわかります。将来の提案は、あなたの3番目と4番目のイメージが非常によく似ていると思うので、イメージがすべて視覚的に異なるようにイメージを変更することです。

もう一つのヒントは、機能の外に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 
}