Question

我正在尝试学习jQuery，我有这种情况，我有3张幻灯片，每张幻灯片都有一些框，我想通过添加类.show逐个显示它们。

事情应该是这样的：

逐个显示第一张幻灯片上的方框
毕竟展示后，我想等待1秒，并为第二次
重复，但在节目之后我想再次显示第一张幻灯片。

$('.slide').each(function() {      
  var $childrens = $(this).children();      
  $childrens.each(function() {
      $this.addClass('show');
  });  
});

有人能解释我怎么做吗？

这是我尝试过的。 http://jsbin.com/jigoku/22/edit?html,css,js,output

Answer 1

我在这里的几个地方使用递归来促进显示幻灯片的延迟。你的代码很稳定，但它几乎立即运行，所以我认为你不会得到你想要的效果。

showSlideItems负责将show添加到幻灯片的每个子项。它等待200ms并显示下一个孩子。

slideDelay获取所有幻灯片并浏览它们，在显示一张幻灯片的所有子项后添加1秒等待。

showSlides负责抓取所有幻灯片并重置他们的孩子，这样我们就可以在上述两个功能完成后循环播放。

jsFiddle示例

<强>的javascript

function showSlides(){
  var slides = $('.slide');
  $('.slide i').removeClass('show');
  slideDelay(slides.toArray());
}

function slideDelay(slides) {
  var slide = slides.shift();

  showSlideItems($(slide).children().toArray(), function(){
    setTimeout(function(){ 
      if(slides.length > 0){
        slideDelay(slides); 
      }else{
        showSlides();
      }
    }, 1000);
  });
}

function showSlideItems(slideItems, callback) {
  if(slideItems.length === 0) {
    callback();
    return;
  }

  var slideItem = slideItems.shift();
  $(slideItem).addClass('show');
  setTimeout(function(){ showSlideItems(slideItems, callback) }, 200);
}

showSlides();

<强> HTML

  <div class="slide">
    <i>one</i>
    <i>two</i>
    <i>three</i>    
  </div>  

  <div class="slide slide-2">
    <i>four</i>
    <i>five</i>
    <i>six</i>
    <i>seven</i>
  </div>  

  <div class="slide slide-3">
    <i>eight</i>
    <i>nine</i>
    <i>ten</i>
  </div>

<强> CSS

.slide{
  margin-top: 20px;
}
.show {
  display: block !important;
}
.slide i {
  display: none;
}

jQuery一次显示每个框

1 个答案: