最後一張幻燈片在幻燈片放映結束時首先重疊

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發送到Slide1的後面，因此它不會重新放置在前面。

當幻燈片重新定位幻燈片1的z-index的0和幻燈片4有z-index的1，因爲它是當前幻燈片。所以當重新定位時，它是最前面的元素。通過改變z-index將它發送到幻燈片的後面，然後腳本的其餘部分按照它應該運行。

var slides = []; 
 

 
// Append images to the slides array 
 
$('.slide').each(function() { 
 
\t "use strict"; 
 
\t slides.push($(this)); 
 
}); 
 

 
function slideshow() { 
 
\t 
 
\t "use strict"; 
 
\t 
 
\t var $current = slides[0], 
 
\t \t $next = slides[1]; 
 
\t 
 
\t setInterval(function() { 
 
\t 
 
\t \t // Slide animation 
 
\t \t $current.css('transform', 'translate3d(-30%, 0, 0)'); 
 
\t \t $next.css('transform', 'translate3d(0, 0, 0)'); 
 
\t \t 
 
\t \t // Reorder slides 
 
\t \t slides.push($current); 
 
\t \t slides.shift(); 
 
\t \t 
 
\t \t // Reestablish slide variables 
 
\t \t $current = slides[0]; 
 
\t \t $next = slides[1]; 
 

 
\t \t // Reset position of slide 
 
\t \t setTimeout(function() { 
 
\t \t \t slides[3].css('transform', 'translate3d(100%, 0, 0)'); 
 
\t \t \t setTimeout(function() { 
 
\t \t \t \t slides[3].css('z-index', 1); 
 
\t \t \t }, 1000); 
 
\t \t \t $current.css('z-index', 0); 
 
\t \t }, 1000); // END: setTimeout() 
 
\t \t slides[3].css('z-index', -1) //<======= place here ========= 
 
\t }, 4000); // END: setInterval() 
 
\t \t 
 
} // END: slideshow() 
 

 
slideshow();

@charset "UTF-8"; 
 
/* CSS Document */ 
 

 
body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
#main-container { 
 
\t height: 60vh; 
 
\t width: 100vw; 
 
\t overflow: hidden; 
 
} 
 

 
#slide-container { 
 
\t width: 200vw; 
 
\t height: 100%; 
 
\t position: relative; 
 
} 
 

 
.slide { 
 
\t background-position: center; 
 
\t background-size: cover; 
 
\t width: 50%; 
 
\t height: 100%; 
 
\t position: absolute; 
 
\t transform: translate3d(100%,0,0); 
 
\t z-index: 1; 
 
\t transition: 1s cubic-bezier(.48,.14,.31,.97); 
 
\t color: white; 
 
\t line-height: 60vh; 
 
\t text-align: center; 
 
\t font-size: 70px; 
 
} 
 

 
#slide-1 { 
 
\t background-image: url(https://media.mnn.com/assets/images/2015/03/forest-path-germany.jpg.653x0_q80_crop-smart.jpg); 
 
\t transform: translate3d(0,0,0); 
 
\t z-index: 0; 
 
} 
 

 
#slide-2 { 
 
\t background-image: url(https://media.treehugger.com/assets/images/2016/03/woodland_trail.jpg.662x0_q70_crop-scale.jpg); 
 
} 
 

 
#slide-3 { 
 
\t background-image: url(http://sim02.in.com/4fc598f2c9f2c0cdc5e0decc188d8d10_ft_xl.jpg); 
 
} 
 

 
#slide-4 { 
 
\t 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"> 
 
\t <div id="slide-container"> 
 
\t \t <div class="slide" id="slide-1">Slide 1</div> 
 
\t \t <div class="slide" id="slide-2">Slide 2</div> 
 
\t \t <div class="slide" id="slide-3">Slide 3</div> 
 
\t \t <div class="slide" id="slide-4">Slide 4</div> 
 
\t </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>