0

我正在尝试使用 XML 将标题文本、段落文本和按钮与每个图像绑定。因此，每个图像都应该包含一个标题文本、一个段落文本和一个应该从 XML 绑定数据的按钮。

因此，对于每个图像，标题文本、段落文本和按钮也应该淡入淡出。并且该按钮应该具有它所属的特定图像的回调。

HTML

<div id="panel">
    <img id="imageSlide" alt="" src="" width="250px" />
    <h2> </h2>
    <p></p>
<button>Learn More</button>
    </div>

jQuery

    $(function() {
    //Local XML Data
    var slideXML = "<rss version='2.0'><channel>";
    slideXML += "<title>IMAGES</title>";
    slideXML += "<images>";
    slideXML += "<image>http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg</image>";
    slideXML += "<image>http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg</image>";
    slideXML += "<image>http://www.behok.ru/i/a/cat/gerbera.jpg</image>";
    slideXML += "<image>http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg</image>";
    slideXML += "<image>http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg</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 imgurl = $xmldata.find("images").find("image:eq(" + shuffleIndex + ")").text();
            $(this).attr('src', imgurl).fadeIn("slow");
        });
    }
});
4

1 回答 1

0

将您的 XML 更改为这样的内容

<rss version='2.0'>
    <channel>
        <title>IMAGES</title>
        <images>
            <image id="1">
                <src>http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg</src>
                <text>
                    <![CDATA[
                        <h2>Foo</h2>
                        <p>Stuff</p>
                    ]]>
                </text>
                <callback>Button Callback stuff</callback>
            </image>
            <image id="2">
                <src>http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg</src>
                <text>
                    <![CDATA[
                        <h2>Foo</h2>
                        <p>Stuff</p>
                    ]]>
                </text>
                <callback>Button Callback stuff</callback>
            </image>
            <image id="3">
                <src>http://www.behok.ru/i/a/cat/gerbera.jpg</src>
                <text>
                    <![CDATA[
                        <h2>Foo</h2>
                        <p>Stuff</p>
                    ]]>
                </text>
                <callback>Button Callback stuff</callback>
            </image>
            <image id="4">
                <src>http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg</src>
                <text>
                    <![CDATA[
                        <h2>Foo</h2>
                        <p>Stuff</p>
                    ]]>
                </text>
                <callback>Button Callback stuff</callback>
            </image>
            <image id="5">
                <src>http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg</src>
                <text>
                    <![CDATA[
                        <h2>Foo</h2>
                        <p>Stuff</p>
                    ]]>
                </text>
                <callback>Button Callback stuff</callback>  
            </image>
        </images>
    </channel>
</rss>

然后在那之后，你的 JavaScript 会像这样保存所有的变量

        var currentImage = $xmldata.find("images").find("image:eq(" + shuffleIndex + ")");
        var imgurl = currentImage.find("src").text();
        var imgText = currentImage.find("text").text();
        var imgButton = currentImage.find("callback").text();

和 HTML

<div id="panel">
<img id="imageSlide" alt="" src="" width="250px" />
<div id="text">
    <!-- changed to all encompassing div -->
</div>
<button>Learn More</button>
</div>​

总而言之，结合所有这些，您的整个脚本将如下所示

$(function() {
slideXML = "<rss version='2.0'>";
slideXML += "<channel>";
slideXML += "       <title>IMAGES</title>";
slideXML += "       <images>";
slideXML += "           <image id='1'>";
slideXML += "               <src>http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg</src>";
slideXML += "               <text>";
slideXML += "                   <![CDATA[";
slideXML += "                       <h2>Foo</h2>";
slideXML += "                       <p>Stuff</p>";
slideXML += "                   ]]>";
slideXML += "               </text>";
slideXML += "               <callback>Button Callback stuff</callback>";
slideXML += "           </image>";
slideXML += "           <image id='2'>";
slideXML += "               <src>http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg</src>";
slideXML += "               <text>";
slideXML += "                   <![CDATA[";
slideXML += "                       <h2>Foo</h2>";
slideXML += "                       <p>Stuff</p>";
slideXML += "                   ]]>";
slideXML += "               </text>";
slideXML += "               <callback>Button Callback stuff</callback>";
slideXML += "           </image>";
slideXML += "           <image id='3'>";
slideXML += "               <src>http://www.behok.ru/i/a/cat/gerbera.jpg</src>";
slideXML += "               <text>";
slideXML += "                   <![CDATA[";
slideXML += "                       <h2>Foo</h2>";
slideXML += "                       <p>Stuff</p>";
slideXML += "                   ]]>";
slideXML += "               </text>";
slideXML += "               <callback>Button Callback stuff</callback>";
slideXML += "           </image>";
slideXML += "           <image id='4'>";
slideXML += "               <src>http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg</src>";
slideXML += "               <text>";
slideXML += "                   <![CDATA[";
slideXML += "                       <h2>Foo</h2>";
slideXML += "                       <p>Stuff</p>";
slideXML += "                   ]]>";
slideXML += "               </text>";
slideXML += "               <callback>Button Callback stuff</callback>";
slideXML += "           </image>";
slideXML += "           <image id='5'>";
slideXML += "               <src>http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg</src>";
slideXML += "               <text>";
slideXML += "                   <![CDATA[";
slideXML += "                       <h2>Foo</h2>";
slideXML += "                       <p>Stuff</p>";
slideXML += "                   ]]>";
slideXML += "               </text>";
slideXML += "               <callback>Button Callback stuff</callback>  ";
slideXML += "           </image>";
slideXML += "       </images>";
slideXML += "   </channel>";
slideXML += "</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 currentImage = $xmldata.find("images").find("image:eq(" + shuffleIndex + ")");
            var imgurl = currentImage.find("src").text();
            var imgHeader = currentImage.find("text").text();
            var imgButton = currentImage.find("callback").text();
            $(this).attr('src', imgurl).fadeIn("slow");
            $("#text").html(imgHeader);
            $("#panel button").text(imgButton);
        });
    }
})
于 2012-07-31T12:25:50.580 回答