Images to be displayed in sequence order

Question

I created a slider But I am going some where wrong in my logic. I am able to show all the images, but not in an order. So initially image1 after that image2.. the sequence is going wrong in my logic. And the image should load as we enter into the browser, it took some time to load.

here is the live demo link:

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

this http://codebins.com/bin/4ldqp9c/23 ?

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

Answer 2

This could be a sequential order:

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++;

        });
    }