javascript - jQuery 超大 : how to use array created from LI?

Question

我正在使用 Jquery Supersized 插件，并且想要一种更好的方法来创建所用图像列表。

我在这里发现了同样的问题jQuery Supersized: Load images from LI，但我在实现解决方案时遇到了困难。

我有一个带有图像名称的 UL，如下所示:

<ul id="slide_list">
<li><div class="slide_src">pic1.jpg</div>
<div class="slide_head">head 1</div></li>

<li><div class="slide_src">pic2.jpg</div>
<div class="slide_head">head 2</div></li>

<li><div class="slide_src">pic3.jpg</div>
<div class="slide_head">head 3</div></li>

</ul>

然后我使用提供的代码 jfriend00 从此列表创建一个数组:

var slides = [];           
$("ul .image").each(function() {
    var this$ = $(this);
    var obj = {};
    obj.image = this$.text();
    obj.title = this$.nextAll(".slide_src").text();
    obj.thumb = this$.nextAll(".slide_head").text();
    slides.push(obj);
});​​​​​​​​​​​​​​​

我的问题是，当我尝试在超大脚本中使用此幻灯片数组时，它给我一个错误“'幻灯片'未定义”

我的超大代码如下所示:

jQuery(function($){
    $.supersized({

        //Functionality
        slideshow               :   1,      //Slideshow on/off
        autoplay                :   1,      //Slideshow starts playing automatically
        start_slide             :   1,      //Start slide (0 is random)
        random                  :   0,      //Randomize slide order (Ignores start slide)
        slide_interval          :   5000,   //Length between transitions

        //Components
        navigation              :   0,      //Slideshow controls on/off
        thumbnail_navigation    :   0,      //Thumbnail navigation
        slide_counter           :   0,      //Display slide numbers
        slide_captions          :   0,      //Slide caption (Pull from "title" in slides array)
        slides                  : slides
    }); 
});

(为了简洁起见，我删除了一些超大选项代码)。

在控制台中显示幻灯片数组的内容向我展示了
[对象对象],[对象对象],[对象对象]所以我知道我做错了什么......

如果我使用这个:slidesDisp = JSON.stringify(slides)

然后数组就完美地显示在控制台中了，[{"image":"pic1.jpg","title":"head 1"},{"image":"pic2.jpg","title":"head 2"},{"image":"pic3.jpg","标题":"头 3"}]
但是当我在超大脚本中使用它时什么也没有发生

幻灯片:slidesDisp

对我做错了什么有什么建议吗？

Answer 1

您的 HTML 与您的 javascript 不匹配，您没有 .image 类，并确保您没有在不同的 DOM 就绪范围中初始化超大插件:

$(function() {

    var slides = [];    

    $("ul .slide_src").each(function() {
        var $this = $(this);
        var obj = {};
        obj.image = $this.text();
        obj.title = $this.next(".slide_head").text();
        slides.push(obj);
    });​​​​​​​​​​​​​​​

    $.supersized({
        // ...........other options
        slides                  : slides
    });
});