如何编写javascript函数来加载显式超大幻灯片

如何编写名为showSlideTwo（）的javascript函数来调用超大api并更改幻灯片？ 我试过了

$（“#超大”）.api.goTo（2）； 或

$.supersized.api.goTo（2）； 它在chrome中给了我以下信息：“无法调用未定义的'goTo'方法”

多谢各位

这是我详细尝试过的：

<script src="http://localhost/js/supersized.3.2.4.min.js" type="text/javascript"></script>
<script type="text/javascript"><!--
  jQuery(function($){
    $.supersized({
    // Background image
    slides  :  [
                { image : 'http://farm2.static.flickr.com/1029/662880103_b3e1591d50_b.jpg' },
                { image : 'http://farm7.static.flickr.com/6084/6080023793_b965ab5702_b.jpg'     },
               ],
  transition : 1,
  vertical_center : 0,
  autoplay: 0,
  slideshow: 0
  });
});          
// --></script>

<script type="text/javascript"><!--
  function showSlideTwo(){
    $("#supersized").api.goTo(2); 
//  or 
// $.supersized.api.goTo(2); 

  }
// --> </script>

这是一个完整的html页面，定义了两个幻灯片。单击链接应该会切换到幻灯片2（我甚至尝试了nextSlide（）），但它不起作用。api似乎是可用的，因为标题可以读取，并且与警报一起正确显示

jQuery（函数（$）{
美元。超大({
//背景图像
幻灯片：[
{图像：'http://farm2.static.flickr.com/1029/662880103_b3e1591d50_b.jpg，标题：'标题图像A'}，
{图像：'http://farm7.static.flickr.com/6084/6080023793_b965ab5702_b.jpg，标题：'标题图像B'}，
],
过渡：1，
垂直中心：1，
自动播放：0，
幻灯片放映：0
});
}); 
#超大{位置：固定；左侧：0；顶部：0；溢出：隐藏；z索引：-999；高度：100%；宽度：100%；}
#超大img{宽度：自动；高度：自动；位置：相对；轮廓：无；边框：无；}
#超大型a{z-索引：-30；位置：固定；溢出：隐藏；顶部：0；左侧：0；宽度：100%；高度：100%；背景：#111；显示：块；}
#超大a.image-loading{背景：#111 url（../img/progress.gif）无重复中心；宽度：100%；高度：100%；}
#text_content，#text_content a{color:fff}
测试页：

$（文档）.ready（函数（）{
$（“#测试按钮”）。单击（函数（）{
var slideTitle=api.getField（'title'）；
alert（slideTitle）；//正确显示“标题图像A”，因此api调用可以工作
api.goTo（2）；//这不会按预期切换映像
//api.nextSlide（）；//->不执行任何操作
});
});

确保将新函数包装在jquery的onready中，如下所示。此外，似乎supersized添加了一个全局api对象

好的，明白了。首先，函数api.goTo（）仅适用于带有选项
slideshow:1
的超大对象

然后它变成了一个CSS问题。没有任何CSS，我看到它生成包含图像的li标记。因此，您只需在上面的示例中添加以下CSS样式行（当然，在更改选项后（如果没有progress.gif图像则无所谓）：

#超大li{显示：块；列表样式：无；z索引：-30；位置：固定；溢出：隐藏；顶部：0；左侧：0；宽度：自动；高度：自动；背景：#111；}
#超大型li.prevslide{z-index:-20；}
#超大li.activeslide{z-索引：-10；}
#超大li.image-load{背景：#111 url（../img/progress.gif）无重复中心；宽度：自动；高度：自动；}
#超大li.image-loading img{可见性：隐藏；}
#超大li.prevslide img，#超大li.activeslide img{display:inline；}
感谢所有思考过这个问题的人。
那么“超大”api到底是什么？提供一个更详细的示例/示例，您会得到更好的帮助。超大是一个jquery插件，可以使用jquery（）根据浏览器大小调整图像大小。也许我的问题只是jquery（）相关。我在理解如何处理变量范围和“javascript对象”方面有问题。我调试了超大库，发现我必须设置slideshow:1或goTo（）函数将不执行任何操作。但现在图像2只会闪烁，并立即消失回1如果我再次单击链接，警报将正确显示“标题图像B”。因此，这可能只是CSS问题？感谢您的回答。我想您正在解决ready（）问题函数。但是您的代码中没有使用这样的函数。您的意思是，以后必须使用ready函数来调用showSlideTwo（）函数吗？如果我调用showSlideTwo（）在同一页上的另一个脚本块中，它说函数未定义。我似乎无法获得api对象。您提到它是一个全局对象，但在我尝试访问它时它未定义。它似乎仅在jQuery（函数（$）{}）；范围内定义。有指针说明为什么？
$.supersized.api.goTo(2);
<script src="http://localhost/js/supersized.3.2.4.min.js" type="text/javascript"></script>
<script type="text/javascript"><!--
  jQuery(function($){
    $.supersized({
    // Background image
    slides  :  [
                { image : 'http://farm2.static.flickr.com/1029/662880103_b3e1591d50_b.jpg' },
                { image : 'http://farm7.static.flickr.com/6084/6080023793_b965ab5702_b.jpg'     },
               ],
  transition : 1,
  vertical_center : 0,
  autoplay: 0,
  slideshow: 0
  });
});          
// --></script>

<script type="text/javascript"><!--
  function showSlideTwo(){
    $("#supersized").api.goTo(2); 
//  or 
// $.supersized.api.goTo(2); 

  }
// --> </script>

<script src="http://localhost/js/supersized.3.2.4.min.js" type="text/javascript"></script>
<script type="text/javascript"><!--
  jQuery(function($){
    $.supersized({
    // Background image
    slides  :  [
                { image : 'http://farm2.static.flickr.com/1029/662880103_b3e1591d50_b.jpg' },
                { image : 'http://farm7.static.flickr.com/6084/6080023793_b965ab5702_b.jpg'     },
               ],
  transition : 1,
  vertical_center : 0,
  autoplay: 0,
  slideshow: 0
  });


  function showSlideTwo(){
    api.goTo(2); 
  }); 
</script>

#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:auto; height:auto; background:#111; }   
    #supersized li.prevslide { z-index:-20; }
    #supersized li.activeslide { z-index:-10;}
    #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:auto; height:auto; }
    #supersized li.image-loading img{ visibility:hidden; }
    #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }