Question

我正在使用滑块淡入淡出。它正确消失但幻灯片立即消失而不是淡出。您是否知道为什么会发生这种情况以及您将在代码中进行哪些更改？

感谢您的帮助和建议：）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您只需在position: absolute上设置.slider__slide即可。您需要使用absolute位置，因为您尝试将图像放在彼此上，具有绝对位置的元素可以执行此操作，但默认情况下，元素具有static位置，static或relative无法相互叠加。

＆＃13;

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

＆＃13;

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; 
}

＆＃13;

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

＆＃13;

FadeIn / FadeOut Slider不淡出（JQuery / Javascript）

1 个答案: