Javascript 只有在浏览完所有图像后，在“多媒体资料”中循环才能开始淡出/淡出图像

*更新2

我发现图像没有淡入/淡出，因为它们没有被视为已加载，为了解决这个问题，我添加了jQuery代码的前3行。我确信这是可以重构的，所以当我重构后会更新

HTML

jQuery

    $(document).ready(function() {
      $(".thisImg").hide();
      $(".activeImg").show();
      $("#thisImg").bind("load", function () { $(this).fadeIn(); });
    });


    var main = function() {

      $('.nextImg').click(function() {
          var currentImg = $('.activeImg');
          var nextImg = currentImg.next(".thisImg");
          if(nextImg.length == 0) {
              nextImg = $('.thisImg').first();
          }   

          currentImg.fadeOut(3000).removeClass('activeImg');
          nextImg.fadeIn(3000).addClass('activeImg');
      });

      $('.prevImg').click(function() {
          var currentImg = $('.activeImg');
          var prevImg = currentImg.prev(".thisImg");
          if(prevImg.length == 0) {
              prevImg = $('.thisImg').last();
          }   

          currentImg.fadeOut(3000).removeClass('activeImg');
          prevImg.fadeIn(3000).addClass('activeImg');
      });
  }

  $(document).ready(main);

-工作小提琴

两个主要问题

一,。您没有设置默认的activeImg元素

<div class="thisImg activeImg">

---

为什么要使用两张完全相同的图片？@SpencerWieczorek，小提琴不是我自己创作的

    $(document).ready(function() {
      $(".thisImg").hide();
      $(".activeImg").show();
      $("#thisImg").bind("load", function () { $(this).fadeIn(); });
    });


    var main = function() {

      $('.nextImg').click(function() {
          var currentImg = $('.activeImg');
          var nextImg = currentImg.next(".thisImg");
          if(nextImg.length == 0) {
              nextImg = $('.thisImg').first();
          }   

          currentImg.fadeOut(3000).removeClass('activeImg');
          nextImg.fadeIn(3000).addClass('activeImg');
      });

      $('.prevImg').click(function() {
          var currentImg = $('.activeImg');
          var prevImg = currentImg.prev(".thisImg");
          if(prevImg.length == 0) {
              prevImg = $('.thisImg').last();
          }   

          currentImg.fadeOut(3000).removeClass('activeImg');
          prevImg.fadeIn(3000).addClass('activeImg');
      });
  }

  $(document).ready(main);

<div class="thisImg activeImg">

var nextImg = currentImg.next(".thisImg");
var prevImg = currentImg.prev(".thisImg");