Fadein / vadeout滑块不淡出(jQuery / javaScript)

我正在研究滑块以褪色。它正确地消失了，但滑梯立即消失而不是消失。您是否知道为什么会发生这种情况以及您在代码中会进行的任何更改？

感谢您的帮助和建议：）

$(".slider > div:gt(0)").hide();
setInterval(function() {
    $('.slider > div:first')
        .fadeOut(2400)
        .next()
        .fadeIn(2400)
        .end()
        .appendTo('.slider');
}, 5000);

body {
  box-sizing: border-box;
  padding: 3rem; 
}
.slider {
  background-color: #fff; 
}
.slider__slide img {
    display: block;
    height: 100vh;
    width: 100%;
    object-fit: cover; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
  <div class="slider">  
    <div class="slider__slide"><img src="https://images.pexels.com/photos/6464/desk-technology-music-white.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 1"></div>
    <div class="slider__slide"><img src="https://images.pexels.com/photos/712321/pexels-photo-712321.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 2"></div>
    <div class="slider__slide"><img src="https://images.pexels.com/photos/715546/pexels-photo-715546.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 3"></div>
</div>
</body>
</html>

您只需要在.slider__slide上设置position: absolute即可。您需要使用absolute位置，因为您试图将图像互相放置，因此具有绝对位置的元素可以做到这一点，但是默认情况下，元素具有static位置，static或relative不能互相覆盖。

$(".slider > div:gt(0)").hide();
setInterval(function() {
    $('.slider > div:first')
        .fadeOut(2400)
        .next()
        .fadeIn(2400)
        .end()
        .appendTo('.slider');
}, 5000);

body {
  box-sizing: border-box;
  padding: 3rem; 
}
.slider {
  background-color: #fff; 
}
.slider__slide {
position: absolute;
}
.slider__slide img {
    display: block;
    height: 100vh;
    width: 100%;
    object-fit: cover; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
  <div class="slider">  
    <div class="slider__slide"><img src="https://images.pexels.com/photos/6464/desk-technology-music-white.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 1"></div>
    <div class="slider__slide"><img src="https://images.pexels.com/photos/712321/pexels-photo-712321.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 2"></div>
    <div class="slider__slide"><img src="https://images.pexels.com/photos/715546/pexels-photo-715546.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 3"></div>
</div>
</body>
</html>

相关内容

最新更新

热门标签：