Question

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

    $("#supersized").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似乎可用，因为可以读取标题并使用警报正确显示。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="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', title : 'title image A'  },
                { image : 'http://farm7.static.flickr.com/6084/6080023793_b965ab5702_b.jpg', title : 'title image B' },
               ],
  transition : 1,
  vertical_center : 1,
  autoplay: 0,
  slideshow: 0
  });

  }); 
</script>
        <style type="text/css"> 
    #supersized { position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
    #supersized img{ width:auto; height:auto; position:relative; outline:none; border:none; }    
    #supersized a { z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; display:block; }
    #supersized a.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
    #text_content, #text_content a {color: fff}
        </style> 
</head>
<body>
<div id="text_content">
Testpage:<br/>
<a href="#" id="testbutton" >click to show slide two</a>
</div>
<script>
$(document).ready(function(){

$("#testbutton").click(function(){
    var slideTitle = api.getField('title');
    alert(slideTitle); // correctly shows 'title image A', so the api call works
    api.goTo(2); // This does not switch the image as expected
    // api.nextSlide(); // -> does not do anyhting

});
});

</script>    
</body>
</html>

Answer 1

确保将新函数打包在jquery中，如下所示。此外，超大化似乎添加了一个全局api对象。

http://buildinternet.com/project/supersized/docs.html#api_docs

<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>

Answer 2

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

然后结果证明是一个CSS问题。没有任何CSS，我看到它生成包含图像的li标签。所以，你只需要在上面的例子中添加以下CSS样式行（在更改当然选项后（如果progress.gif图像不存在则无关紧要）：


    #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; }

感谢任何想过这个问题的人。

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

2 个答案: