javascript - 按顺序显示的图像

Question

我创建了一个 slider ，但我的逻辑有些错误。我可以显示所有图像，但不能按顺序显示。所以最初是 image1 之后是 image2.. 按照我的逻辑，顺序是错误的。当我们进入浏览器时，图像应该加载，加载需要一些时间。

这里是现场演示链接:

http://codebins.com/bin/4ldqp9c/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");

        });
    }

});

Answer 1

这个http://codebins.com/bin/4ldqp9c/23 ？

      if  ( prevIndex < maximages ){
       shuffleIndex = prevIndex;
       prevIndex++; 
      }
      else {
        prevIndex=0;
        shuffleIndex=prevIndex;
        prevIndex++;
      }