javascript - 为什么 setInterval 在上次迭代后不调用匿名

Question

我刚刚开始使用 Javascript/jquery 并尝试制作一个非常基本的幻灯片。基本上，img/slides 绝对定位在容器内彼此堆叠，z-index 确定堆叠顺序，通过 jquery 设置，然后 setInterval 调用一个匿名函数1.5 秒淡出顶部幻灯片以显示底部幻灯片。

function slide_play(){
	var slides = $('.slider ul li');
	var no_of_slides = slides.length;

// Set Slides in Order
	for(z=99, i=0; i<no_of_slides; i++) {
		$(slides[i]).css('z-index', z);
		z--;
	}

	var i = 0;
	var first_item  = $(slides[0]);
	var last_item = $(slides[no_of_slides-1]);
  var curr_item  = first_item;

	setInterval(function() {
		$(curr_item).fadeOut('slow');
		if(curr_item.index() != last_item.index()) {
			curr_item = $(slides[++i]);
		} else {
			curr_item = first_item;
		}
	},1500);
}

slide_play();

p{margin-bottom: 20px;}

.jumbotron{
	padding-left: 0;
	padding-right: 0;}

.slider ul {
	list-style: none;
	position: relative;
	height: 400px;}

.slider ul li{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0 }

img{
	display: block;
	width: 100%;
	height: 100% }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid no-padding">
	<div class="container ">
		<div class="row">

			<div class="col-xs-12 jumbotron">
				<div class="slider">
					<ul>
						<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=350&h=150" alt="" /></li>
						<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=250%C3%97150&w=350&h=150" alt="" /></li>
						<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="" /></li>
					</ul>
				</div>	
			</div>

		</div><!-- /Row -->
	</div> <!-- /container  -->

</div>

问题是 setInterval 在 curr_item 等于 last_item 后停止/不调用匿名函数(这将重新启动循环) (curr_item = last_item)。 Wny？

问题是 setInterval 在 curr_item 等于 last_item 后停止/不调用匿名函数(这将重新启动循环) (curr_item = last_item)。 Wny？

我刚刚开始使用 Javascript/jquery 并尝试制作一个非常基本的幻灯片。基本上，img/slides 绝对定位在容器内彼此堆叠，z-index 确定堆叠顺序，通过 jquery 设置，然后 setInterval 调用一个匿名函数1.5 秒淡出顶部幻灯片以显示底部幻灯片。

Answer 1

您的幻灯片已经淡出。它仍然在调用该函数，但你看不到图片。您需要使它们再次可见。

您还需要将 i 重置为零。

因此，如果您将函数更改为如下所示:

setInterval(function() {
    $(curr_item).fadeOut('slow');
    if(curr_item.index() != last_item.index()) {
        curr_item = $(slides[++i]);
    } else {
        curr_item = first_item;
        i = 0;
    }
    $(curr_item).show();
},1500);

它应该可以工作。