Question

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

这是现场演示链接：

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

Answer 2

这可能是一个连续的顺序：

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

        });
    }

图像按顺序显示

2 个答案: