javascript - for循环和setInterval，幻灯片展示

Question

我从3-4小时前就出问题了，我已经here , here , here等等...但我无法在我的案例中完成这项工作:

var timer_slideshow = {};
var that, that_boss, has_auto, ele_to_prep;

function timer_func_slideshow(ele) {
    ele.find('.btn-next-slideshow').trigger( "click" );
}
$('.slideshow-wrapper').each(function(idx, val) {
	that_boss = $(this);
	that = $('.slideshow-container', this); // the same has that_boss.find('.slideshow-container')
	has_auto = that.data('auto') != 0;

	if(has_auto)
		timer_slideshow[idx] = setInterval(function() { timer_func_slideshow(that_boss); }, 4000);

	that_boss.find('.btn-next-slideshow').on("click", function() {
		if(has_auto)
	    	clearInterval(timer_slideshow[idx]);
	    that.find('.item').eq(0).stop().animate({
	        'margin-left': '-100%',
	    }, 500, function() {
	        $(this).parent().append($(this));
	        $(this).css({'margin-left': '0'});
	        timer_slideshow[idx] = (has_auto) ? setInterval(function() { timer_func_slideshow(that_boss); }, 4000) : undefined;
	    });
	});

	that_boss.find('.btn-prev-slideshow').on("click", function() {
		if(has_auto)
	    	clearInterval(timer_slideshow[idx]);
	    ele_to_prep = that.find('.item').last().css({'margin-left': '-100%'});
	    that.prepend(ele_to_prep);
	    that.find('.item').eq(0).stop().animate({ // este era o ultimo, o que fizemos prepend na linha acima
	        'margin-left': '0'
	    }, 500, function() {
			timer_slideshow[idx] = (has_auto) ? setInterval( function() { timer_func_slideshow(that_boss); }, 4000) : undefined;
		});
	});
});

.slideshow-container {
    margin: 0 auto;
    width: 100%;
    height: 400px;
    overflow:hidden;
    white-space:nowrap; /* VERY IMPORTANT, tirar para perceber */
    list-style:none;
    font-size: 0; /* SEM MARGEM ENTRE OS ELEMENTOS FILHOS */
}
.slideshow-container>.item {
   display: inline-block;
   width: 100%;
   height: 100%;
}
.slideshow-container>.item>.imagem {
   display: block;
   width: 100%;
   height: 90%;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}
.slideshow-container>.item>small {
   /*position: absolute;*/
   /*bottom: 20px;*/
   z-index: 99999999999999;
   width: 100%;
   display: block;
   color: #252525;
   font-size: 12px;
   text-align: center;
}
.slideshow-wrapper {
    position: relative;
    width: 100%;
}
.slideshow-controls {
    position: absolute;
    height: 20px;
    bottom: 0;
    top: 0;
    margin: auto auto;
    color: #D11C58;
    cursor: pointer; cursor: hand;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slideshow-wrapper">
  <div class="slideshow-container">
     <div class="item" style="min-height: 400px;">
        <div class="imagem" style="background-image: url('https://picsum.photos/500/500/?image=585');"></div>
        <small></small>
     </div>
     <div class="item" style="min-height: 400px;">
        <div class="imagem" style="background-image: url('https://picsum.photos/500/500/?image=586');"></div>
        <small></small>
     </div>
     <div class="item" style="min-height: 400px;">
        <div class="imagem" style="background-image: url('/image/5SakC.jpg?s=128&g=1');"></div>
        <small></small>
     </div>
  </div>
  <div class="slideshow-controls btn-next-slideshow">►</div>
  <div class="slideshow-controls btn-prev-slideshow">◄</div>
</div>

<div class="slideshow-wrapper">
  <div class="slideshow-container">
     <div class="item" style="min-height: 400px;">
        <div class="imagem" style="background-image: url('https://picsum.photos/500/500/?image=585');"></div>
        <small></small>
     </div>
     <div class="item" style="min-height: 400px;">
        <div class="imagem" style="background-image: url('https://picsum.photos/500/500/?image=586');"></div>
        <small></small>
     </div>
     <div class="item" style="min-height: 400px;">
        <div class="imagem" style="background-image: url('/image/5SakC.jpg?s=128&g=1');"></div>
        <small></small>
     </div>
  </div>
  <div class="slideshow-controls btn-next-slideshow">►</div>
  <div class="slideshow-controls btn-prev-slideshow">◄</div>
</div>

如您所见，只有最后一张幻灯片在移动/工作，因为 setInterval 是用循环结束时的最后一个值定义的。

我知道那是因为 each cicle 和 that_boss 值不是永久的，与最后一个循环值保持一致。

但无法找到解决方案。

Answer 1

只是移动

var timer_slideshow = {};
var that, that_boss, has_auto, ele_to_prep;

在 $('.slideshow-wrapper').each(function(idx, val) 中:

function timer_func_slideshow(ele) {
  ele.find('.btn-next-slideshow').trigger("click");
}
$('.slideshow-wrapper').each(function(idx, val) {
  var timer_slideshow = {};
  var that, that_boss, has_auto, ele_to_prep;
  that_boss = $(this);
  that = $('.slideshow-container', this); // the same has that_boss.find('.slideshow-container')
  has_auto = that.data('auto') != 0;

  if (has_auto)
    timer_slideshow[idx] = setInterval(function() {
      timer_func_slideshow(that_boss);
    }, 4000);

  that_boss.find('.btn-next-slideshow').on("click", function() {
    if (has_auto)
      clearInterval(timer_slideshow[idx]);
    that.find('.item').eq(0).stop().animate({
      'margin-left': '-100%',
    }, 500, function() {
      $(this).parent().append($(this));
      $(this).css({
        'margin-left': '0'
      });
      timer_slideshow[idx] = (has_auto) ? setInterval(function() {
        timer_func_slideshow(that_boss);
      }, 4000) : undefined;
    });
  });

  that_boss.find('.btn-prev-slideshow').on("click", function() {
    if (has_auto)
      clearInterval(timer_slideshow[idx]);
    ele_to_prep = that.find('.item').last().css({
      'margin-left': '-100%'
    });
    that.prepend(ele_to_prep);
    that.find('.item').eq(0).stop().animate({ // este era o ultimo, o que fizemos prepend na linha acima
      'margin-left': '0'
    }, 500, function() {
      timer_slideshow[idx] = (has_auto) ? setInterval(function() {
        timer_func_slideshow(that_boss);
      }, 4000) : undefined;
    });
  });
});

.slideshow-container {
  margin: 0 auto;
  width: 100%;
  height: 400px;
  overflow: hidden;
  white-space: nowrap;
  /* VERY IMPORTANT, tirar para perceber */
  list-style: none;
  font-size: 0;
  /* SEM MARGEM ENTRE OS ELEMENTOS FILHOS */
}

.slideshow-container>.item {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.slideshow-container>.item>.imagem {
  display: block;
  width: 100%;
  height: 90%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.slideshow-container>.item>small {
  /*position: absolute;*/
  /*bottom: 20px;*/
  z-index: 99999999999999;
  width: 100%;
  display: block;
  color: #252525;
  font-size: 12px;
  text-align: center;
}

.slideshow-wrapper {
  position: relative;
  width: 100%;
}

.slideshow-controls {
  position: absolute;
  height: 20px;
  bottom: 0;
  top: 0;
  margin: auto auto;
  color: #D11C58;
  cursor: pointer;
  cursor: hand;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slideshow-wrapper">
  <div class="slideshow-container">
    <div class="item" style="min-height: 400px;">
      <div class="imagem" style="background-image: url('https://picsum.photos/500/500/?image=585');"></div>
      <small></small>
    </div>
    <div class="item" style="min-height: 400px;">
      <div class="imagem" style="background-image: url('https://picsum.photos/500/500/?image=586');"></div>
      <small></small>
    </div>
    <div class="item" style="min-height: 400px;">
      <div class="imagem" style="background-image: url('/image/5SakC.jpg?s=128&g=1');"></div>
      <small></small>
    </div>
  </div>
  <div class="slideshow-controls btn-next-slideshow">►</div>
  <div class="slideshow-controls btn-prev-slideshow">◄</div>
</div>

<div class="slideshow-wrapper">
  <div class="slideshow-container">
    <div class="item" style="min-height: 400px;">
      <div class="imagem" style="background-image: url('https://picsum.photos/500/500/?image=585');"></div>
      <small></small>
    </div>
    <div class="item" style="min-height: 400px;">
      <div class="imagem" style="background-image: url('https://picsum.photos/500/500/?image=586');"></div>
      <small></small>
    </div>
    <div class="item" style="min-height: 400px;">
      <div class="imagem" style="background-image: url('/image/5SakC.jpg?s=128&g=1');"></div>
      <small></small>
    </div>
  </div>
  <div class="slideshow-controls btn-next-slideshow">►</div>
  <div class="slideshow-controls btn-prev-slideshow">◄</div>
</div>