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

这是我想出的一个解决方案。

首先，我在 xml 文件的末尾添加了一个元素，其中只有“last”的“path”属性。

接下来，我添加以下变量来保存第一个元素的路径名：

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 回答
0

您的代码正在使用next()，一旦您到达最后一张图像，它将不返回任何内容。

您需要使用不同的测试来关闭循环，例如：

tmp.length==0

请注意，tmp 已经是一个 jQuery 对象，因此您不需要将其包装在 $() 中。

此页面提供了一个 nextOrFirst() 函数的示例，它可以满足您的需求。

于 2013-02-26T01:16:14.223 回答