最后一张幻灯片在幻灯片放映结束时首先重叠

Question

我设置了一个简单的幻灯片，具有视差效果，其中排队的幻灯片与当前幻灯片重叠。 在幻灯片放映周期完成之前，一切都很好，其中最后一张幻灯片行为异常，并且不会像其他幻灯片那样重置其在当前幻灯片下方的位置。 我无法确定为什么它会这样。

JSFiddle

var slides = [];
// Append images to the slides array
$('.slide').each(function() {
"use strict";
slides.push($(this));
});
function slideshow() {
"use strict";
var $current = slides[0],
$next = slides[1];
setInterval(function() {
// Slide animation
$current.css('transform', 'translate3d(-30%, 0, 0)');
$next.css('transform', 'translate3d(0, 0, 0)');
// Reorder slides
slides.push($current);
slides.shift();
// Reestablish slide variables
$current = slides[0];
$next = slides[1];
// Reset position of slide
setTimeout(function() {
slides[3].css('transform', 'translate3d(100%, 0, 0)');
setTimeout(function() {
slides[3].css('z-index', 1);
}, 1000);
$current.css('z-index', 0);
}, 1000); // END: setTimeout()
}, 4000); // END: setInterval()
} // END: slideshow()
slideshow();

@charset "UTF-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
}
#main-container {
height: 60vh;
width: 100vw;
overflow: hidden;
}
#slide-container {
width: 200vw;
height: 100%;
position: relative;
}
.slide {
background-position: center;
background-size: cover;
width: 50%;
height: 100%;
position: absolute;
transform: translate3d(100%, 0, 0);
z-index: 1;
transition: 1s cubic-bezier(.48, .14, .31, .97);
color: white;
line-height: 60vh;
text-align: center;
font-size: 70px;
}
#slide-1 {
background-image: url(https://media.mnn.com/assets/images/2015/03/forest-path-germany.jpg.653x0_q80_crop-smart.jpg);
transform: translate3d(0, 0, 0);
z-index: 0;
}
#slide-2 {
background-image: url(https://media.treehugger.com/assets/images/2016/03/woodland_trail.jpg.662x0_q70_crop-scale.jpg);
}
#slide-3 {
background-image: url(http://sim02.in.com/4fc598f2c9f2c0cdc5e0decc188d8d10_ft_xl.jpg);
}
#slide-4 {
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/05/fc/88/f9/waterloop-trail.jpg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="slide-container">
<div class="slide" id="slide-1">Slide 1</div>
<div class="slide" id="slide-2">Slide 2</div>
<div class="slide" id="slide-3">Slide 3</div>
<div class="slide" id="slide-4">Slide 4</div>
</div>
</div>

Answer 1

放置slides[3].css('z-index', -1)只是为了结束你的setInterval。这会将幻灯片发送到 Slide1 后面，这样它就不会在前面重新定位。

重新定位幻灯片时，幻灯片 1 的z-index为0，幻灯片 4 的z-index为1，因为它是当前幻灯片。因此，当重新定位时，它是最前沿的元素。通过更改 z 索引，它会将其发送到幻灯片的背面，然后脚本的其余部分按预期运行。

var slides  = [];
// Append images to the slides array
$('.slide').each(function() {
	"use strict";
	slides.push($(this));
});
function slideshow() {
	
	"use strict";
	
	var $current = slides[0],
		$next = slides[1];
	
	setInterval(function() {
	
		// Slide animation
		$current.css('transform', 'translate3d(-30%, 0, 0)');
		$next.css('transform', 'translate3d(0, 0, 0)');
		
		// Reorder slides
		slides.push($current);
		slides.shift();
		
		// Reestablish slide variables
		$current = slides[0];
		$next = slides[1];
		// Reset position of slide
		setTimeout(function() {
			slides[3].css('transform', 'translate3d(100%, 0, 0)');
			setTimeout(function() {
				slides[3].css('z-index', 1);
			}, 1000);
			$current.css('z-index', 0);
		}, 1000); // END: setTimeout()
		slides[3].css('z-index', -1)   //<======= place here =========
	}, 4000); // END: setInterval()
		
} // END: slideshow()
slideshow();

@charset "UTF-8";
/* CSS Document */
body {
	margin: 0;
	padding: 0;
}
#main-container {
	height: 60vh;
	width: 100vw;
	overflow: hidden;
}
#slide-container {
	width: 200vw;
	height: 100%;
	position: relative;
}
.slide {
	background-position: center;
	background-size: cover;
	width: 50%;
	height: 100%;
	position: absolute;
	transform: translate3d(100%,0,0);
	z-index: 1;
	transition: 1s cubic-bezier(.48,.14,.31,.97);
	color: white;
	line-height: 60vh;
	text-align: center;
	font-size: 70px;
}
#slide-1 {
	background-image: url(https://media.mnn.com/assets/images/2015/03/forest-path-germany.jpg.653x0_q80_crop-smart.jpg);
	transform: translate3d(0,0,0);
	z-index: 0;
}
#slide-2 {
	background-image: url(https://media.treehugger.com/assets/images/2016/03/woodland_trail.jpg.662x0_q70_crop-scale.jpg);
}
#slide-3 {
	background-image: url(http://sim02.in.com/4fc598f2c9f2c0cdc5e0decc188d8d10_ft_xl.jpg);
}
#slide-4 {
	background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/05/fc/88/f9/waterloop-trail.jpg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
	<div id="slide-container">
		<div class="slide" id="slide-1">Slide 1</div>
		<div class="slide" id="slide-2">Slide 2</div>
		<div class="slide" id="slide-3">Slide 3</div>
		<div class="slide" id="slide-4">Slide 4</div>
	</div>
</div>

Answer 2

• 玩类 相反，看看你的代码有多简单。
• 使用transitionend
• 你不需要做疯狂的东西嵌套setTimeout无用 - 你可以拥有任意数量的幻灯片，而无需更改一行代码：

var $slides = $('.slide'),                       // Cache them
tot     = $slides.length,                    // How many slides?
c       = 0,                                 // Current Slide Counter
$next   = $slides.eq(c).addClass("slideIn"); // Prepare first slide
function slideshow() {
$next.toggleClass("slideOut slideIn").on("transitionend", function() {
$(this).removeClass("slideOut");
});
$next = $slides.eq(++c % tot).addClass("slideIn");
}
setInterval(slideshow, 4000); // Use setInteval Here

#main-container {
height: 60vh;
overflow: hidden;
}
#slide-container {         
height: inherit;       /* P.S: why 200% width? :D */
position: relative;
}
.slide {
position: absolute;
left:0; top:0;
background: none 50% 50% / cover;
width: 100%;
height: inherit;
color: white;
line-height: 60vh;
text-align: center;
font-size: 70px;

transition: 1s cubic-bezier(.48, .14, .31, .97);
transform: translateX(100%);
}
.slideIn { /* CREATE A SLIDEIN CLASS */
transform: translateX(0);
z-index: 1; /* 1 is only needed at slideIn */
}
.slideOut { /* CREATE A SLIDEOUT CLASS */
transform: translateX(-30%);
z-index: 0; /* 0 is only needed on slideOut */
}
#slide-1 {background-image: url(//placehold.it/800x600/0fb);}
#slide-2 {background-image: url(//placehold.it/800x600/fb0);}
#slide-3 {background-image: url(//placehold.it/800x600/0bf);}

<div id="main-container">
<div id="slide-container">
<div class="slide" id="slide-1">Slide 1</div>
<div class="slide" id="slide-2">Slide 2</div>
<div class="slide" id="slide-3">Slide 3</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>