在jquery

Question

我有一些带有一些图像的div

<div class="slides_container">
          <div class="slides">
            <img src="gif256/3.jpg" data-time="5000" class="myimg"/>
            <img src="gif256/4.gif" data-time="3000" class="myimg"/>
            <img src="gif256/5.gif" data-time="4000" class="myimg"/>
            <img src="gif256/6.gif" data-time="5000" class="myimg"/>
            <img src="gif256/3.jpg" data-time="3000" class="myimg"/>
          </div>
</div> 

我想在数据时间属性中使用延迟写入来滑动此图像。我用这个代码

<script type="text/javascript">              
$('.slides img:gt(0)').hide();
setInterval(function(){
  $('.slides :first-child').fadeOut()
     .next('img').fadeIn()
     .end().appendTo('.slides');},
  5000);
</script>

但此代码以相同的延迟（5秒）滑动图像。如何使用每个图像的数据时间滚动它？ 感谢。

Answer 1

您可以使用setTimeout()和递归而不是setInterval。

＆＃13;

＆＃13;

$('.slides img:gt(0)').hide();
changeSlide();
function changeSlide(){
  var changeIn = +$('.slides :first-child').data("time");
  console.log(changeIn);
  setTimeout(function(){
   
    $('.slides :first-child').fadeOut()
     .next('img').fadeIn()
     .end().appendTo('.slides');
     changeSlide();
  }, changeIn);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slides_container">
      <div class="slides">
        <img src="https://dummyimage.com/300x200/000000/fff" data-time="6000" class="myimg"/>
        <img src="https://dummyimage.com/300x200/333333/fff" data-time="2000" class="myimg"/>
        <img src="https://dummyimage.com/300x200/666666/fff" data-time="4000" class="myimg"/>
      </div>
</div>

＆＃13;

＆＃13;

＆＃13;