Question

我正在为一个网站制作横幅，我需要它来遍历图像。我的问题是它一次播放图像然后停止。我已经尝试了所有我能想到的没有运气的东西。我确信这比我做的更简单，但是一些帮助会非常感激。最新版本如下。

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

Answer 1

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

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

tmp.length==0

请注意，tmp已经是一个jQuery对象，所以你不需要将它包装在$（）中。

This page提供了nextOrFirst（）函数的示例，它可以执行您想要的操作。

Answer 2

这是我提出的解决方案。

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

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

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

就像魔术一样，它现在正确循环！

JQuery-Javascript循环问题

2 个答案: