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中，放置了不同数量的图像（在这种情况下，3只狗在一只，5只猫在一只）。 each函数以1000ms延迟遍历每个图像，通过添加类.hide隐藏所有图像，然后使用当前索引号删除图像的类。

我希望每个容器都能遍历所有图像，然后重新启动循环，使其在无穷远处继续运行。现在的问题是，当最短的循环结束时，它会重新启动两个而不仅仅是已经结束的特定循环，并且只是在“幻灯片”重新启动到早期时创建了这个小故障。

我如何才能让循环只能单独循环？

Answer 1

有很多方法可以做到这一点。你的设计很复杂，试图让loopImages（）做所有的东西和太多的循环和setTimeouts。

如果你想对代码进行较少的修改，那么我建议制作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）您可以删除第一个元素并将其添加到最后一个元素。所以你可以删除循环，在setTimeout中总是显示下一个元素。

如果您需要其他选项，请告诉我。

尝试使用更少的循环和计时器以获得更好的性能。

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();

应用每个父母子女单独重复的功能

2 个答案: