为什么图像弹出然后又消失了答案

【问题标题】：Why are the images popping up and then it fades out为什么图像弹出然后又消失了
【发布时间】：2020-07-10 15:38:31
【问题描述】：

我有 6 张图像要淡入/淡出，但前 5 张图像会弹出，好像他们正试图在滑动图像工作之前加载图像一样。观看前 5 张图像弹出，然后在工作时淡出和淡入。我希望它们从一开始就淡入淡出而不弹出它们。这是什么原因造成的？

不用担心id="liSlider" 部分。它只是 CSS 中的填充。

Javascript -

<script type="text/javascript">
   $("#slideshow > div:gt(0)").hide();

   setInterval(function() {
   $('#slideshow > div:first')
   .fadeOut(5000)
   .next()
   .fadeIn(5000)
   .end()
   .appendTo('#slideshow');
   }, 5000);
</script>

HTML -

<div id="slideshow">
    <div id="liSlider"><a href="{base_url}ntouchdesktop"><img src="{base_url}assets/images/svrsv2/SVRS_Homepage-Slide_2.png"></a></div>
    <div id="liSlider"><a href="https://www.sorenson.com/wavello" target="_blank"><img src="{base_url}assets/images/svrsv2/SVRS_Homepage-Slide_1.png"></a></div>
    <div id="liSlider"><a href="{base_url}ntouchmobile"><img src="{base_url}assets/images/svrsv2/SVRS_Homepage-Slide_5.png"></a></div>
    <div id="liSlider"><a href="{base_url}ntouchdesktop"><img src="{base_url}assets/images/svrsv2/SVRS_Homepage-Slide_6.png"></a></div>
    <div id="liSlider"><a href="{base_url}ntouchmobile"><img src="{base_url}assets/images/svrsv2/SVRS_Homepage-Slide_3.png" ></a></div>
    <div id="liSlider"><a href="{base_url}ntouchmobile"><img src="{base_url}assets/images/svrsv2/SVRS_Homepage-Slide_4.png"></a></div>
</div>

【问题讨论】：

把代码扔进小提琴，它似乎按预期工作：jsfiddle.net/7pd4uxq6/1?它可能在你的 CSS 中？只需在id="liSlider" 上注明。 ID 不能/不打算重复，你想要那些 class="liSlider"
谢谢，我把id改成class了，还是会弹出图片。我认为这与这个问题无关。

标签： javascript html fadein fadeout sliding

【解决方案1】：

您可以使用 CSS 隐藏所有幻灯片，然后在加载时淡入第一个幻灯片。

更新的演示：https://jsfiddle.net/7pd4uxq6/3/

CSS

#slideShow {
  position: relative;
}

.liSlider { // note class
  display: none;
  position: absolute;
}

$('#slideshow > div:first').fadeIn(500) // updated

setInterval(function() {
   $('#slideshow > div:first')
   .fadeOut(5000)
   .next()
   .fadeIn(5000)
   .end()
   .appendTo('#slideshow');
}, 5000);

【讨论】：