Javascript 要按顺序显示的图像

我创建了一个滑块，但我的逻辑出了问题。我可以显示所有图像，但不能按顺序显示。所以最初的图像1在图像2之后。。在我的逻辑中，顺序错了。 图像应该在我们进入浏览器时加载，加载需要一些时间

以下是现场演示链接：

HTML

<div id="panel">
  <div id="title">
  </div>
  <img id="imageSlide" alt="" src="" width="250px"/>
  <div id="desc">
  </div>
</div>

JS

$(function() {
    //Local XML Data
    var slideXML = "<rss version='2.0'><channel>";
    slideXML += "<title>IMAGES</title>";
    slideXML += "<images>";
    slideXML += "<image>";
    slideXML += "<title>Image 1</title>";
    slideXML += "<url>http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg</url>";
    slideXML += "<desc>Description For Image 1</desc>";
    slideXML += "</image>";
    slideXML += "<image>";
    slideXML += "<title>Image 2</title>";
    slideXML += "<url>http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg</url>";
    slideXML += "<desc>Description For Image 2</desc>";
    slideXML += "</image>";
    slideXML += "<image>";
    slideXML += "<title>Image 3</title>";
    slideXML += "<url>http://www.behok.ru/i/a/cat/gerbera.jpg</url>";
    slideXML += "<desc>Description For Image 3</desc>";
    slideXML += "</image>";
    slideXML += "<image>";
    slideXML += "<title>Image 4</title>";
    slideXML += "<url>http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg</url>";
    slideXML += "<desc>Description For Image 4</desc>";
    slideXML += "</image>";
    slideXML += "<image>";
    slideXML += "<title>Image 5</title>";
    slideXML += "<url>http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg</url>";
    slideXML += "<desc>Description For Image 5</desc>";
    slideXML += "</image>";
    slideXML += "<image>";
    slideXML += "<title>Image 6</title>";
    slideXML += "<url>http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg</url>";
    slideXML += "<desc>Description For Image 6</desc>";
    slideXML += "</image>";
    slideXML += "</images>";
    slideXML += "</channel></rss>";

    //Parse XML content
    var xmlDoc = $.parseXML(slideXML);
    var $xmldata = $(xmlDoc);

    //Find Total No of Image
    var maximages = ($xmldata.find("images").find("image").length);


    $(function() {
        //FadeIn/FadeOut Image on Set Time Interval on Slide
        setInterval(Slider, 2500);
    });

    var prevIndex = 0;

    function Slider() {
        $('#imageSlide').fadeOut("slow", function() {
            var shuffleIndex = Math.round((Math.random() * (maximages - 1)));
            if (prevIndex == shuffleIndex) {
                if (prevIndex >= (maximages - 1)) {
                    shuffleIndex--;
                } else {
                    shuffleIndex++;
                }
            }
            prevIndex = shuffleIndex;
            $("#panel").fadeIn("slow").css('background', '#000');

            var title = $xmldata.find("images").find("image:eq(" + shuffleIndex + ")").find("title").text();
            $("#title").text(title).fadeIn("slow");

            var imgurl = $xmldata.find("images").find("image:eq(" + shuffleIndex + ")").find("url").text();
            $(this).attr('src', imgurl).fadeIn("slow");

            var desc = $xmldata.find("images").find("image:eq(" + shuffleIndex + ")").find("desc").text();
            $("#desc").text(desc).fadeIn("slow");

        });
    }

});

$（函数（）{
//本地XML数据
var slideXML=“”；
slideXML+=“图像”；
slideXML+=“”；
slideXML+=“”；
slideXML+=“图像1”；
slideXML+=”http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg";
slideXML+=“图像1的描述”；
slideXML+=“”；
slideXML+=“”；
slideXML+=“图像2”；
slideXML+=”http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg";
slideXML+=“图像2的说明”；
slideXML+=“”；
slideXML+=“”；
slideXML+=“图像3”；
slideXML+=”http://www.behok.ru/i/a/cat/gerbera.jpg";
slideXML+=“图像3的描述”；
slideXML+=“”；
slideXML+=“”；
slideXML+=“图像4”；
slideXML+=”http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg";
slideXML+=“图像4的描述”；
slideXML+=“”；
slideXML+=“”；
slideXML+=“图像5”；
slideXML+=”http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg";
slideXML+=“图像5的说明”；
slideXML+=“”；
slideXML+=“”；
slideXML+=“图像6”；
slideXML+=”http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg";
slideXML+=“图像6的描述”；
slideXML+=“”；
slideXML+=“”；
slideXML+=“”；
//解析XML内容
var xmlDoc=$.parseXML（slideXML）；
var$xmldata=$（xmlDoc）；
//查找图像的总编号
var最大值=（$xmldata.find（“图像”）.find（“图像”）.length）；
$（函数（）{
//幻灯片上设定时间间隔上的淡入淡出图像
设置间隔（滑块，2500）；
});
var指数=0；
函数滑块（）{
$（'#imageSlide'）。淡出（“慢”，函数（）{
var shuffleIndex=Math.round（（Math.random（）*（maximages-1））；
if（prevIndex==shuffleIndex）{
如果（prevIndex>=（最大值-1））{
shuffleIndex--；
}否则{
shuffleIndex++；
}
}
prevIndex=shuffleIndex；
$（“#panel”）.fadeIn（“slow”）.css（'background'，'#000'）；
var title=$xmldata.find（“图像”）.find（“图像：eq（“+shuffleIndex+”））.find（“标题”）.text（）；
$（“#title”）.text（title）.fadeIn（“慢”）；
var imgurl=$xmldata.find（“图像”）.find（“图像：eq（“+shuffleIndex+”））.find（“url”）.text（）；
$（this.attr（'src'，imgurl）.fadeIn（“slow”）；
var desc=$xmldata.find（“图像”）.find（“图像：eq（“+shuffleIndex+”））.find（“desc”）.text（）；
$（“#desc”）.text（desc）.fadeIn（“慢”）；
});
}
});

这可能是一个顺序：

var i = 0;

    function Slider() {
        $('#imageSlide').fadeOut("slow", function() {

            if(i == maximages) i = 0;
            $("#panel").fadeIn("slow").css('background', '#000');

            var title = $xmldata.find("images").find("image:eq(" + i + ")").find("title").text();
            $("#title").text(title).fadeIn("slow");

            var imgurl = $xmldata.find("images").find("image:eq(" + i + ")").find("url").text();
            $(this).attr('src', imgurl).fadeIn("slow");

            var desc = $xmldata.find("images").find("image:eq(" + i + ")").find("desc").text();
            $("#desc").text(desc).fadeIn("slow");

            i++;

        });
    }

---

这可能是一个顺序：

var i = 0;

    function Slider() {
        $('#imageSlide').fadeOut("slow", function() {

            if(i == maximages) i = 0;
            $("#panel").fadeIn("slow").css('background', '#000');

            var title = $xmldata.find("images").find("image:eq(" + i + ")").find("title").text();
            $("#title").text(title).fadeIn("slow");

            var imgurl = $xmldata.find("images").find("image:eq(" + i + ")").find("url").text();
            $(this).attr('src', imgurl).fadeIn("slow");

            var desc = $xmldata.find("images").find("image:eq(" + i + ")").find("desc").text();
            $("#desc").text(desc).fadeIn("slow");

            i++;

        });
    }

这个

if（prevIndex

这是什么

if（prevIndex

我不明白你的问题。您希望的顺序是什么？为什么要使用随机数来确定要显示的下一个索引？这是自相矛盾的…我的逻辑中的序列出错了，那么不要使用

Math.random

来获取下一张图像；）您还应该将

$xmldata.find（“图像”）.find（“图像：eq（“+shuffleIndex+”））

的结果保存到一个变量中，因为您多次使用它。最好使用

setTimeout

而不是

setInterval

；）@codebins.com的keyur：我面临着图像序列顺序的问题。请帮我演示一下。我不明白你的问题。您希望的顺序是什么？为什么要使用随机数来确定要显示的下一个索引？这是自相矛盾的…我的逻辑中的序列出错了，那么不要使用

Math.random

来获取下一张图像；）您还应该将

$xmldata.find（“图像”）.find（“图像：eq（“+shuffleIndex+”））

的结果保存到一个变量中，因为您多次使用它。最好使用

setTimeout

而不是

setInterval

；）@codebins.com的keyur：我面临着图像序列顺序的问题。请帮我演示一下。在第一次迭代中，所有图像都完成了一个周期，然后在第二次迭代中，第一个图像重复两次，整个过程继续下去，只有我需要你的另一个帮助。在我的方法中还有一个问题，我正在为我的滑块创建一个缩略图计时器。我需要你的帮助。这是我对我尝试过的代码进行注释的链接，请检查此链接，该缩略图的参考是它应该在第一次迭代中创建，因为所有图像都完成了一个周期，然后在第二次迭代中，第一个图像重复两次，整个过程继续下去，只有我需要你的另一个帮助。在我的方法中还有一个问题，我正在为我的滑块创建一个缩略图计时器。我需要你的帮助。这是我对我尝试过的代码进行注释的链接，请检查此链接，该缩略图的参考是它应该按照此参考中的方式创建