Jquery 幻灯片没有正确隐藏图像

Question

我在 HTML5 活页簿设计中有一个图像幻灯片。当我在空白网页上使用代码时，它工作正常。但在动画书中，幻灯片中的最后一张图片(有时与最后一张图片不同)仍显示在事件图片下方，而不是被隐藏。

每张图片只会出现一秒钟，然后每次都会显示最后一张图片。一旦幻灯片循环遍历每个图像，它就可以正常工作。

关于为什么会发生这种情况的任何想法？

这是我为这本书编写的 HTML:

<div id="outside-content">
<div id="zoom-viewport">
<div id="flipbook">
<div class="hard" style="background-image:url(image.png)"></div>

<div class="hard" id="slideshow" style="margin:0px">
<div><img src="image.jpg"></div>
<div><img src here</div>
<div><img src here</div>
..... many more divs with images....
</div><!-- slideshow end-->

<div>Page</div><!-- title page -->
<div>Page</div>
... more pages ...
</div><!-- flipbook-->
</div><!--zoom-viewport-->
</div><!-- outside-content-->

<script type="text/javascript">
$("#flipbook").turn({
    width: 950,
    height: 615,
    autoCenter: true
});
</script>

这是幻灯片的 Jquery:

$("#slideshow > div:gt(0)").hide();

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

还有 CSS:

#slideshow { 
margin: 30px 10px; 
position: relative; 
width: 470px; 
height: 595px; 
padding: 0px; 
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#slideshow > div { 
position: absolute; 
top: 0px; 
left: 0px; 
right: 0px; 
bottom: 0px;
}

我尝试将 gt(0) 中的数字更改为 -1 或 1，并尝试删除“>”但没有任何变化。

Answer 1

隐藏所有的div然后重新开始

 $("#slideshow div").hide();