0

私はウェブサイトのバナーに取り組んでおり、画像をループするためにバナーが必要です。私の問題は、画像を一度再生してから停止することです。私は運が悪かったと思うことができるすべてを試しました。これは私が作っているよりも簡単だと確信していますが、助けていただければ幸いです。最新バージョンは以下のとおりです。

$(document).ready(function(){

    // Variables required by script
    var currentimage;

    // Load Gallery XML file
    $.ajax({
        url: 'banner.xml',
        type: 'GET',
        dataType: 'xml',
        error: function(){
            alert('Error loading XML document');
        },
        success: function(xmlData){
            // do something with xml
            setupImages(xmlData);
        }
    });


    // Display images
    function setupImages(xmlData) {
        // read xml and use it to populate page 
        //get first image
        currentimage = $(xmlData).find("image:first");

        // Fade in image after countdown
        var t = setTimeout(function(){showNewImage()}, 1000);
    }


    // Display the image, caption, rating and label 
    function showNewImage() {
        var image = $(currentimage).find("path").text();
        var caption = $(currentimage).find("caption").text();

        $("#imagelabel").removeClass("active");
        // Fade out current image and fade in new image
        $("#bannerimgholder").animate({opacity:0},500, 
            function(){
                $(this).css({"backgroundImage":"url("+image+")"}).animate({opacity:1},1000, 
                function(){
                    $("#imagelabel").addClass("active");
                });
            });
        // Add caption
        $("#imagelabel").text(caption); 

        var to = setTimeout(function(){getNextImage()}, 5000);
    }

    function getNextImage(){
        var tmp = $(currentimage).next();                                               
        if ($(tmp).find("path").text()=="") {
            currentimage = $(xmlData).find("image:first");
        } else {
            currentimage = tmp;
        }
        showNewImage();
    }
});
4

2 に答える 2

0

コードはを使用してnext()います。これは、最後の画像に到達すると何も返しません。

ループを閉じるには、別のテストを使用する必要があります。次に例を示します。

tmp.length==0

tmpはすでにjQueryオブジェクトであるため、$（）でラップする必要はありません。

このページでは、必要な処理を実行するnextOrFirst（）関数の例を示します。

于 2013-02-26T01:16:14.223 に答える
0

これが私が思いついた解決策です。

まず、「last」の「path」属性だけを使用して、xmlファイルの最後に要素を追加しました。

次に、次の変数を追加して、最初の要素のパス名を保存します。

var imagepathtext;

次に、setupImages（xmlData）関数に次を追加しました。

imagepathtext = $(currentimage).find("path").text();

最後に、getNextImage（）関数をから変更しました

function getNextImage(){
    var tmp = $(currentimage).next();                                               
    if ($(tmp).find("path").text()=="") {
        currentimage = $(xmlData).find("image:first");
    } else {
        currentimage = tmp;
    }
    showNewImage();
}

に

function getNextImage(){
                var tmp = $(currentimage).next();                                               
                if ($(tmp).find("path").text()=="last") {
                    while ($(tmp).find("path").text()!=firstimagepath)
                    {
                        var tmp1 = $(tmp).prev();
                        tmp = tmp1;
                    }
                    currentimage = tmp;
                } else {
                    currentimage = tmp;
                }               
                showNewImage();
            }

そして、魔法のように、今は正しくループします！

于 2013-03-05T21:18:44.613 に答える