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 id = "slider">
<ul class="slides">
    <li class="slide"><img src = "resources/banner1.jpg"/></li>
    <li class="slide"><img src = "resources/banner2.jpg"/></li>
    <li class="slide"><img src = "resources/banner3.jpg"/></li>
</ul>
</div>

JQuery代码：

$(function() {
var width = 693;
var animationSpeed = 500;
var pause = 3000;
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var interval;
var sliderUlWidth = slideCount * slideWidth;
var clickcount = 0;
$("#icon").addClass("pauseicon");

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');


function startSlider() {
    interval = setInterval(function() {
        nextSlide();}, pause);
}

function nextSlide() {
    $('#slider ul li:first-child').appendTo('#slider ul');
    $('#slider ul').css('margin-left', 0);
    var value = parseInt($(".pager").text(), 10) + 1;
    if(value === 4){ value = 1;}
    $(".pager").text(value + "/3");
    $slideContainer.animate({'margin-left': '-693px'}, animationSpeed);

}

startSlider();});

CSS:

#slider {
      width: 693px;
      height: 434px;
      overflow: hidden; }
 #slider .slides {
        display: block;
        width: 2079px;
        height: 434px;
        margin: 0 auto;
        padding: 0; }
    #slider .slide {
        float: left;
        list-style-type: none;
        width: 693px;
        height: 434px; }

通过正常调用 javascript 来包含脚本。 <script type = "text/javascript" src = "slider.js"></script>，将脚本调用放在 </body> 标记之前。

Answer 2

隐藏所有 div 然后重新开始

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

Answer 3

在我将 slideshow javascript 包装在函数中之前也遇到过问题。

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

然后就完美运行了！

Jquery 幻灯片未正确隐藏图像

Jquery slideshow not hiding images correctly

html

css

jquery

image

slideshow