【发布时间】：2018-07-09 23:36:44
【问题描述】：
我在 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 值不是永久的，会保留最后一个循环值。
但无法找到解决此问题的方法。
【问题讨论】：
标签： javascript jquery foreach setinterval