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并尝试删除'＆gt;'但没有任何改变。

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

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

2 个答案: