Question

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

＆＃13;

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

＆＃13;

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% }

＆＃13;

<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>

＆＃13;

问题是setInterval在curr_item等于last_item（curr_item = last_item）后停止/不调用匿名函数（将重启循环）。 WNY？

我刚刚开始使用Javascript / jquery并尝试制作一个非常基本的幻灯片。基本上img / slide绝对定位在一个容器内堆叠在一起，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);

它应该工作。

为什么setInterval在最后一次迭代后不会调用匿名

1 个答案: