Question

我把我的代码放在这里并在jsfiddle中进行测试，测试就在这里：

我的代码是：

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

你遇到的问题是 - 在＆＃34;隐藏＆＃34;事件您正在设置另一个间隔。因此，它运行的时间越长，您运行创建此效果的幻灯片间隔就越多。

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

/// 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

Jquery幻灯片图像显示无法控制

1 个答案: