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

Question

我一直在研究一个使用幻灯片显示不同元素的javascript程序。截至目前，我的程序正确显示3张幻灯片，但没有显示第四张幻灯片。我仍然难以理解为什么会这样做。

以下是代码：

＆＃13;

＆＃13;

$(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);
}

 

＆＃13;

＆＃13;

＆＃13;

JSFiddle

Answer 1

它没有显示的原因是div没有被正确排序，以至于你的第三个＆＃34; mySlides＆＃34; 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
}