JQuery Javascript循环问题

JQuery-Javascript looping issue

本文关键字：问题 循环 Javascript JQuery      更新时间：2023-09-26

我正在为一个网站制作横幅，我需要它来循环浏览图像。我的问题是，它在图像中播放一次，然后停止。我试过了我能想到的一切，但都没有成功。我相信这比我做的要简单，但如果能提供一些帮助，我们将不胜感激。下面是最新版本。

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

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

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

tmp.length==0

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

本页提供了一个nextOrFirst((函数的示例，该函数可以执行您想要的操作。

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

首先，我在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();
            }

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

相关文章：