您的位置: 首页  >  技术问答  >  最后一张幻灯片在幻灯片放映结束时首先重叠

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

分类: 技术问答 • 2022-06-25 13:16:02
问题描述：

我已经设置了一个带有视差效果的简单幻灯片放映，其中排队的幻灯片与当前幻灯片重叠。所有的作品都很好，直到幻灯片放映循环完成，最后一张幻灯片出现故障，并且不会像其他幻灯片一样重置其位置。我无法确定它为什么会这样。最后一张幻灯片在幻灯片放映结束时首先重叠

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>

答

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

答

  • 玩带班，而不是，看看如何简单的可以是你的代码。
  • 使用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>

相关推荐