javascript - jquery幻灯片图片显示无控制

Question

我把我的代码放在这里和 jsfiddle 中进行测试，测试在这里:

https://jsfiddle.net/efuw4oh3/4/

我的代码是:

HTML

<img class="img0" src="https://i.pinimg.com/564x/4f/b7/0c/4fb70c8f19424fb03c957c9e8081357e.jpg" style="display:none;" width="100" height="100"/>
<img class="img1" src="https://i.pinimg.com/750x/28/4c/44/284c443c6c886c905ca8513a0b13ba29.jpg" style="display:none;" width="100" height="100"/>
<img class="img2" src="https://i.pinimg.com/564x/4f/b7/0c/4fb70c8f19424fb03c957c9e8081357e.jpg" style="display:none;" width="100" height="100"/>
<img class="img3" src="https://i.pinimg.com/750x/28/4c/44/284c443c6c886c905ca8513a0b13ba29.jpg" style="display:none;" width="100" height="100" />

我的脚本

<script>
    i=0;
    $(document).ready(function(){
        loading();
    });

    function loading(){
      if(i==5){
        i=0;
      }
      ///jQuery("#text").show(1000).hide(1000,function(){reloading();});
      jQuery(".img"+i).show(1000).hide(1000,function(){reloading();});
    }

    function reloading(id){
      setInterval("loading()",2000);
      //alert("ok"+i);
      i++;
    }

</script>

问题基本上是图像开始并显示良好，第三次，同时显示所有图像，顺序不规则，我不知道为什么，因为图像加载必须按顺序，当动画1 结束开始下一个，等等，我不知道为什么要这样做

感谢您的帮助，向社区致以最诚挚的问候

Answer 1

您遇到的问题是 - 在“隐藏”事件中您设置了另一个间隔。因此，它运行的时间越长，创建这种效果的幻灯片放映间隔就越多。

您应该有一个幻灯片放映间隔来处理图像的显示/隐藏和增量。

/// Current image   
let i=0;

$(document).ready(function(){
  loading();
});


function loading(){
  // Starts our slideshow
  setInterval(startSlideShow, 2000);
}

function startSlideShow(){
  /// Shows the image
  $(".img"+i).show(1000).hide(1000);
  /// Increments
  i++;
  /// Checks if we're beyond how many images we have.
  if(i === 4) i = 0;
}

Fiddle