jQuery Supersized：从LI加载图像

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

我想要实现的是采用这样的自动生成列表：

 
/images/image1.jpg My Title /images/image-thumb1.jpg
 
/images/image2.jpg My Title /images/image-thumb2.jpg
 
/images/image3.jpg My Title /images/image-thumb3.jpg
  

并采用相关选项并将其添加到幻灯片中：

  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'} ] }); });  

正在使用的系统不允许服务器端代码，因此我必须在JS中完成所有操作。

我已经成功地创建了一种更简单的方法来实现这一点，但它只能通过一个尾随的逗号来实现，这会导致IE8的破坏。

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

或多或少：

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

例如

这个：

 `
/images/image.jpg My Title /images/image-thumb.jpg
` 

对此：

 {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/bYs​​4x/

Answer 2

 ​​​​​​​​​