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 ドキュメントで関数を呼び出す前に関数を指定する必要があることに注意してください。これらの関数のうち 2 つを使用することはできますが、この場合は必要ありません。

jQuery コードにバグがなくなったので、スライドショーが意図したとおりに機能しない原因となっているバグを解決する必要があります。

参照: jsFiddle ベータ スライドショー

于 2012-12-23T23:55:02.220 に答える