for loop和setInterval，幻灯片显示

时间：2018-07-09 23:36:44

标签： javascript jquery foreach setinterval

从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('https://i.stack.imgur.com/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('https://i.stack.imgur.com/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的值不是永久的，而是停留在最后一个循环值上。

但是无法找到解决方案。

2 个答案:

答案 0 :(得分：4)

只需移动

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('https://i.stack.imgur.com/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('https://i.stack.imgur.com/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>

答案 1 :(得分：2)

变量在function范围之外定义，因此为。

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

只需将它们放在您的function内。

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('https://i.stack.imgur.com/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('https://i.stack.imgur.com/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>

相关问题
最新问题