我正在使用 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
});
});
(为简洁起见,我删除了一些超大的选项代码)。
在控制台中显示幻灯片数组的内容向我展示了
[object Object],[object Object],[object Object]
,所以我知道我做错了什么......
如果我使用这个:
slidesDisp = JSON.stringify(slides)
然后数组在控制台中完美显示,
[{"image":"pic1.jpg","title":"head 1"},{"image":"pic2.jpg","title":"head 2"},{"image":"pic3.jpg","title":"head 3"}]
但是当我在超大脚本中使用它时,什么也没有发生
slides: slidesDisp
对我做错了什么有什么建议吗?