jQuery幻灯片无法正确隐藏图像

debugcn 发表于 Dev

laustewa14

我在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，并尝试删除了“>”，但没有任何更改。

比利

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