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

时间：2017-08-01 00:21:25

标签： javascript jquery css z-index slideshow

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

JSFiddle

＆＃13;
＆＃13; 
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();
＆＃13; 
@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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

将slides[3].css('z-index', -1)放在setInterval的末尾。这会将幻灯片发送到Slide1后面，因此它不会在前面重新定位。

幻灯片重新定位时，幻灯片1的z-index 0为z-index，幻灯片4的1为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();，因为它是当前的幻灯片。因此，当重新定位时，它是最前沿的元素。通过更改z-index，它将它发送到幻灯片的后面，然后脚本的其余部分按原样运行。

＆＃13;
＆＃13; 
@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);
}
＆＃13; 
<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>
＆＃13; 
{{1}}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

＆＃13;
＆＃13; 
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
＆＃13; 
#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);}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题