0

我需要将此 div 内的图像的属性添加到 JS 数组并使用这些图像运行 Supersized：

       <div id="dgaslides">
            <img src="img/temp/topimg01.jpg" title="Image 1">
            <img src="img/temp/topimg02.jpg" title="Image 2">
            <img src="img/temp/topimg03.jpg" title="Image 3">
        </div>

我的 JS：

jQuery(function($){

var img_length = $('#dgaslides img').length-1;

var dgaslides = [];

$('#dgaslides img').each( function(i){

    var src     = $(this).attr('src');
    var title   = $(this).attr('title');

    dgaslides.push("{image : '" + src + "', title : '" + title + "'}");

    if(img_length == i){

        $.supersized({

            // Functionality
            slide_interval          :   3000,       // Length between transitions
            transition              :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
            transition_speed        :   700,        // Speed of transition
            horizontal_center       :   1,          // Centers image horizontally. When turned off, the images resize/display from the left of the page.


            // Components                           
            slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
            slides                  :   dgaslides

        });

    }
}); });

它确实有效，因为我在输出中获得了 3 张图像，但是链接（src）是“未定义”，并且标题也不存在？

硬编码的正确方法是：

var dgaslides = [           // Slideshow Images
                {image : 'img/temp/topimg01.jpg', title : 'Reception'},
                {image : 'img/temp/topimg02.jpg', title : 'Reception 2 og noget mere tekst her'},  
                {image : 'img/temp/topimg03.jpg', title : 'Reception 3'}
            ];

谁能帮我弄清楚我做错了什么？

4

3 回答 3

0

您将字符串保存到数组而不是对象。

这是一个 JSFiddle，其中包含按预期工作的代码的修改版本（没有超大函数）：http: //jsfiddle.net/SBuXF/

主要变化：dgaslides.push({image : src, title : title});

我已将生成的数组输出到控制台，然后是您的硬编码数组 - 它们是相同的。

编辑：您的硬编码标题与 HTML 不匹配，因此两个数组的内容略有不同，但它们的格式都正确。一个更正的小提琴在这里：http: //jsfiddle.net/SBuXF/1/

于 2013-05-06T02:30:06.423 回答
0

我认为您需要传递对象数组而不是字符串数组。

dgaslides.push({image : src, title : title });
于 2013-05-06T02:25:21.310 回答
0

您可以使用 jQuery 的 map 方法来简化任务。以下是代码。

jQuery(function ($) {
    var dgaslides = $('#dgaslides img').map(function () {
      return {
        image: $(this).attr('src'),
        title: $(this).attr('title')
      };
    });
    $.supersized({
      slide_interval: 3000,
      transition: 1,
      transition_speed: 700,
      horizontal_center: 1,                   
      slide_links: 'blank',
      slides: dgaslides
    });
});

希望这可以帮助。

于 2013-05-06T03:32:43.853 回答