应用每个通过每个父母孩子分别重复的功能

Question

我正在尝试为画廊中的缩略图创建一个简单的"幻灯片"。每个画廊都是用jQuery，html和CSS组成的：

var imageGalleries = $("img.work-image").parent().parent();
var loopImages = function(){
    imageGalleries.each(function(){
      var children = $(this).children().children();
      var childrenLength = children.length - 1;
      var i = 0;
      children.each(function(index){
        var that = $(this);
        setTimeout(function(){
          children.addClass("hide");
          that.removeClass("hide");
          if(childrenLength == index){
            setTimeout(function(){
            setTimeout(loopImages, 0);
            }, 1000);
          }
        }, 1000 * index);
      })
    })
};
loopImages();

.hide {
display:none;
}
.work-image {
  width:100px;
  height:100px;
}

<div class="work-container">
  <div class="work-inner" style="height: 248px;">
      <img class="work-image hide" src="https://www.nationalgeographic.com/content/dam/animals/thumbs/rights-exempt/mammals/d/domestic-dog_thumb.jpg">
      <img class="work-image hide" src="http://cdn1-www.dogtime.com/assets/uploads/gallery/korean-jindo-dog-breed-pictures/puppy-1_680-453.jpg">
      <img class="work-image hide" src="http://cdn-www.dailypuppy.com/media/dogs/anonymous/patches_maltipoo16.jpg_w450.jpg">
	</div>
</div>
<div class="work-container">
  <div class="work-inner" style="height: 248px;">
      <img class="work-image hide" src="https://www.petmd.com/sites/default/files/scared-kitten-shutterstock_191443322.jpg">
      <img class="work-image hide" src="https://www.petmd.com/sites/default/files/cat-lying-on-side.jpg">
      <img class="work-image hide" src="http://fixnation.org/wordpress/wp-content/uploads/2014/03/cats-kittens_00379052.jpg">
      <img class="work-image hide" src="http://ichef.bbci.co.uk/wwfeatures/live/624_351/images/live/p0/2c/t5/p02ct5b3.jpg">
      <img class="work-image hide" src="http://blog.lifesabundance.com/pics/xbeautiful-whiskery-kitty.jpg.pagespeed.ic.t9JK-YIMfw.jpg">
	</div> 
</div>    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如您所见，每个缩略图容器具有.work-container类，并且内部DIV具有.work-inner类。在.work-inner中，放置了不同数量的图像（在这种情况下，一只和5只猫中有3只狗）。each函数通过1000ms延迟通过每个图像循环，通过添加类.hide，然后使用当前索引编号删除图像的类，从而隐藏所有图像。

我希望每个容器都可以浏览所有图像，然后重新启动循环，使其在无限范围内进行。目前的问题是，当最短的循环结束时，它重新启动了两者，而不仅仅是结束的特定循环，并创建了这种小故障，其中"幻灯片"重新启动到早期。

我将如何使循环单独循环？

Answer 1

有很多方法可以做到这一点。您使设计变得复杂，试图使loopimages（）完成所有事情以及太多的循环和固定量。

如果您想对代码进行更少的修改，那么我建议制作2个不同的阵列，并两次致电loopimages（）。

喜欢

var loopImages = function(childeren){
  children.each(function(index){
     var that = $(this);
     setTimeout(function(){
       children.addClass("hide");
       that.removeClass("hide");
       if(childrenLength == index){
         setTimeout(function(){
         setTimeout(loopImages, 0);
         }, 1000);
       }
     }, 1000 * index);
   })
};
var firstImageGallery = $('#firstGallery .work-image');
var secondImageGallery = $('#secondGallery .work-image');
loopImages(firstImageGallery );
loopImages(secondImageGallery );

其他选项是

1）您可以使下一个元素始终活跃，如果不存在下一个元素，则将第一个元素作为活动。2）您可以删除第一个元素并将其添加到最后一个元素。因此，您可以删除循环，并且在SettieMout中始终显示下一个元素。

让我知道您是否需要其他选项。

尝试使用较少的循环和计时器以提高性能。

Answer 2

我创建了此快速解决方案：https：//jsfiddle.net/7s5zx5pm/9/

JS：

var galleries = $(".work-inner");
var loopImages = function(){
    galleries.each(function(){
        //First round
        $(this).children(".work-image").first().removeClass("hide");
        var self = this;
        var hide_and_display = function(){
            var current_image = $(self).children(".work-image:not(.hide)");
            var next_image = $(current_image).next().removeClass("hide");
            //If next doesn't exist use first
            if(!$(next_image).length){
                $(current_image).addClass("hide");
                $(self).children(".work-image").first().removeClass("hide");
            }
            $(current_image).addClass("hide");
        };
        setInterval(hide_and_display, 1000);
    });
};
loopImages();