0

我不知道出了什么问题（有问题的行有多个星号）这是幻灯片。在 JS 部分，DW 一直告诉我在包含 rotatePics 函数的行上有错误。

这是 HTML 部分：

<div id=photos>

<img src="../imgs/dr_gonzalez.jpg" class=show alt="Dr. G">

<img src="../imgs/immunization.jpg" alt="SHOTZ!">

<img src="../imgs/senior_pet.jpg" alt="Former Puppies">

<img src="../imgs/vet_barnes.jpg" alt="Best doctor ever">

</div>

CSS部分：

#photos img {position:absolute;

}



 #photos{

 width: 241px;

 height: 329px;

 overflow:hidden;

}

aaaaannnnnnddd JS，这是我需要调试的：

$(document).ready(function() {

slideShow();

});



function slideShow() {

  var current = $('#photos .show');

  var next = current.next().length ? current.next() :

  current.siblings().first;



  current.hide().removeClass('show');

  next.fadeIn().addClass('show');



  setTimeout(slideShow, 3000);

 }



$(document).ready(function() {

rotatePics(1);

}



***function rotatePics(currentPhoto){***         

 var numberOfPhotos = $('#photos img').length;
 currentPhoto = currentPhoto % numberOfPhotos;
 $('#photos img').eq(currentPhoto).fadeOut(function (){

    $('#photos img').each(function (i)

    {

        $(this).css('zIndex', ((numberOfPhotos - i) +currentPhoto)            numberOfPhotos);

    });



    $(this).show();



    setTimeout(function ()

    {

        rotatePics(++currentPhoto);

    }, 4000);

    });

};
4

2 回答 2

1

您似乎没有使用调试器工具来帮助捕获您的简单错误。最好查看浏览器控制台并注意它所说的内容，这可以在错误发生时将您引导至错误。

甚至 jsFiddle 也有 jsLint 工具来提醒您错误！

这是验证的 jQuery 标记，但请记住，这并不能保证您已按预期编写脚本。

function slideShow() {

    var current = $('#photos .show');

    var next = current.next().length ? current.next() :

    current.siblings().first;

    current.hide().removeClass('show');

    next.fadeIn().addClass('show');

    setTimeout(slideShow, 3000);

}

function rotatePics(currentPhoto) {

    var numberOfPhotos = $('#photos img').length;
    currentPhoto = currentPhoto % numberOfPhotos;
    $('#photos img').eq(currentPhoto).fadeOut(function() {

        $('#photos img').each(function(i) {
            $(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto));
        });

        $(this).show();

        setTimeout(function() {
            rotatePics(++currentPhoto);
        }, 4000);
    });

}

$(document).ready(function() {
    slideShow();
    rotatePics(1);
});

请注意，您应该在 jQuery 文档就绪中调用它们之前指定您的函数，尽管您可以使用其中两个就绪函数，但您不需要它。

现在您的 jQuery 代码没有错误，您需要解决导致幻灯片无法按预期运行的错误。

参考： jsFiddle Beta 幻灯片

于 2012-12-23T23:55:02.220 回答
0

为什么要把事情搞得这么复杂？您有两个计时器功能，并且您正在操作 zindexs 和隐藏图像等。请参阅此 stackoverflow 问题以获取答案：

jQuery 不旋转图像

于 2013-04-18T06:14:23.643 回答