Показ 4-го слайда в слайдшоу JavaScript

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

Причина, по которой он не отображается, заключается в том, что элементы div не были упорядочены должным образом, так что ваш третий элемент "mySlides" фактически содержит ваш четвертый элемент. Следовательно, когда вы устанавливаете четвертый div для отображения: блок, он не будет отображаться.

Я удалил все обработчики щелчков и тому подобное, и вы можете увидеть, как это работает в скрипте ниже. Предложением на будущее было бы изменить изображения так, чтобы они все визуально различались, так как я думаю, что ваше третье и четвертое изображение выглядят очень похожими.

Другой совет - переместить селекторы 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
}