0

画像のリストを表示するために通常の変数を使用しています。しかし、私が必要としているのは、XML を使用することです。誰でも私を助けてください。var 'imgs' は xml である必要があります。

Jクエリ

$(function() {

    var imgs = ['http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg', 'http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg', 'http://www.behok.ru/i/a/cat/gerbera.jpg', 'http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg', 'http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg'];

   var maximages = imgs.length; //No of Images
   Slider();
   setInterval(Slider, 3000);
   var prevIndex = 0, prevPrevIndex = 0;

   function Slider() {
       $('#imageSlide').fadeOut("slow", function() {
           do {
               shuffleIndex = Math.floor(Math.random() * maximages);
           } while(prevIndex == shuffleIndex || prevPrevIndex == shuffleIndex)

           prevPrevIndex = prevIndex;
           prevIndex = shuffleIndex;

           $("#panel").fadeIn("slow").css('background', '#000');

           $(this).attr('src', imgs[shuffleIndex]).fadeIn("slow");
       });
   }

});
4

2 に答える 2

2

xml形式の画像URLが必要であり、次にこのxmlを解析することを想定しています。

<images>
<image-url>http://www.academyflorists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg</image-url>
<image-url>http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg</image-url>
<image-url>http://www.behok.ru/i/a/cat/gerbera.jpg</image-url>
<image-url>http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg</image-url>
<image-url>http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg</image-url>
</images>

次の方法で解析できます

var imgs = "<images><image-url>'http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg'</image-url><image-url>'http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg'</image-url><image-url>'http://www.behok.ru/i/a/cat/gerbera.jpg'</image-url><image-url>'http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg'</image-url><image-url>'http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg'</image-url></images>"
$xml = $.parseXML(imgs)
images = []
$($($xml).find('image-url')).each(function() { images.push($(this).text()) })

画像には、すべての画像URLの配列が含まれます

于 2012-07-30T06:26:46.647 に答える
1

xml がどのように見えるかを教えてくれなかったので、次の基本的なスキーマをまとめました

<?xml version="1.0" encoding="utf-8" ?>
<images>
    <image>url of image</image>
    <image>url of next image</image>
<images>

jQuery サイトを検索すると、Xml の操作方法が記載されていることがわかります - http://api.jquery.com/jQuery.parseXML/

parseXMLxml 文字列で使用し、jQuery オブジェクトに変換する必要があります。次に、find()要素をループしたり、要素をループしたり、要素のテキストや属性を選択したりできます。次の例はこれを示しています。

$(function() {

    // your image list as xml string
    var xmlStr = '<?xml version="1.0" encoding="utf-8" ?><images><image>http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg</image><image>http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg</image><image>http://www.behok.ru/i/a/cat/gerbera.jpg</image><image>http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg</image><image>http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg</image></images>';

    // parse the xml and produce an jQuery image object ($image) to represent the list of image elements
    var xmlDoc = $.parseXML(xmlStr),
        $xml = $(xmlDoc),
        $image = $xml.find("image");

    // loop throught your image elements and alert the url
    $image.each(function() {
        var imageElement = this, // this within the loop is the current element
            $imageElement = $(imageElement),
            imageUrl = $imageElement.text(); // use text to get the url

        alert(imageUrl);
    });

    // use length on the jQuery object to get the element count
    var maximages = $image.length;
    alert(maximages);

    var shuffleIndex = 3,
        imageElement = $image[shuffleIndex], // index the random image that you want to use
        $imageElement = $(imageElement),
        imageUrl = $imageElement.text();

    alert(imageUrl);

});
于 2012-07-30T06:39:22.010 に答える