jQuery 超大 : Load images from LI

Question

我正在使用 jQuery Supersized 插件 ( http://buildinternet.com/project/supersized/ )。

我想要实现的目标是获取一个自动生成的列表，如下所示:

<ul>
    <li><span class="image">/images/image1.jpg</span> <span class="title">My Title</span> <span class="thumb">/images/image-thumb1.jpg</span></li>
    <li><span class="image">/images/image2.jpg</span> <span class="title">My Title</span> <span class="thumb">/images/image-thumb2.jpg</span></li>
    <li><span class="image">/images/image3.jpg</span> <span class="title">My Title</span> <span class="thumb">/images/image-thumb3.jpg</span></li>
</ul>

并采取相关选项并将其添加到幻灯片中:

<script type="text/javascript">
jQuery(function($){
    $.supersized({
        ...
        slide_links : false,
        slides : [
            {image : '/images/image1.jpg', title : 'My title', thumb : '/images/image-thumb1.jpg'},
            {image : '/images/image2.jpg', title : 'My title', thumb : '/images/image-thumb2.jpg'},
            {image : '/images/image3.jpg', title : 'My title', thumb : '/images/image-thumb3.jpg'}
        ]
    });
});
</script>

正在使用的系统不允许服务器端代码，所以我必须在 JS 中完成这一切。

我已经成功地创建了一种更简单的方法来执行此操作，但只能通过尾随逗号来实现，这会导致 IE8 之前的版本崩溃。

所以这是我能想到的唯一解决方案，但到目前为止还无法安排。

或多或少:

我可以获取列表中的详细信息并在幻灯片中使用它们来生成超大背景图像吗？

例如

这个:

`<li><span class="image">/images/image.jpg</span> <span class="title">My Title</span> <span class="thumb">/images/image-thumb.jpg</span></li>`

对此:

{image : '/images/image.jpg', title : 'My title', thumb : '/images/image-thumb.jpg'}

最后一个没有逗号。

Answer 1

您可以使用此 jQuery 构建幻灯片数据结构:

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

工作演示:http://jsfiddle.net/jfriend00/bYs4x/