Javascript 为什么图像会突然出现然后消失

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

$（“#幻灯片>div:gt（0）”）.hide（）；
setInterval（函数（）{
$（“#幻灯片>分区：第一个”）
.衰减（5000）
.next（）
法丹先生（5000）
(完)
.appendTo（“#幻灯片”）；
}, 5000);

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>

---

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

更新的演示：

CSS

JS

---

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

更新的演示：

CSS

JS

---

把代码扔进了小提琴，它看起来像预期的那样工作：？它可能是你的CSS中的某个东西？只需在

id=“liSlider”

上做一个注释。id不能/不打算重复，您想让这些

class=“liSlider”

谢谢，我将id更改为class，图像仍然会弹出。我不认为这与这个问题有关。把代码扔进了一堆乱七八糟的东西中，它似乎像预期的那样工作：？它可能是你的CSS中的某个东西？只需在

id=“liSlider”

上做一个注释。id不能/不打算重复，您想让这些

class=“liSlider”

谢谢，我将id更改为class，图像仍然会弹出。我认为这与这个问题无关。

#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);