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

How to write a javascript function to load an explicit supersized slide

本文关键字：一个 幻灯片 函数 何编写 javascript 加载      更新时间：2023-09-26

如何编写一个名为showSlideTwo()的javascript函数，调用超大api并更改幻灯片?I tried

<>之前$(" #超大型").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>

确保将新函数包装在jquery的onready中，如下所示。此外，supersize似乎还添加了一个全局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>

好的，知道了。首先，函数api.goTo()只适用于带有slideshow: 1选项的超大对象。

结果是一个CSS问题。在没有任何CSS的情况下，我看到它生成了包含图像的li标签。所以，你只需要在上面的例子中添加以下几行CSS样式(当然，在改变选项之后(如果progress.gif图像不在那里也没关系):

<>之前#supersize li {display:block;list-style:没有;z - index: -30;位置:固定;溢出:隐藏;上图:0;左:0;宽度:汽车;高度:汽车;背景:# 111;}#超大型的李。Prevslide {z-index:-20;}#超大型的李。{z-index:-10;}#超大型的李。图片加载{背景:#111 url(../img/progress.gif)不重复中心中心;宽度:汽车;高度:汽车;}#超大型的李。图像加载img{可见度:隐藏;}#超大型的李。预览图片，#supersized li。activesslide img{显示:内联;}之前

感谢所有花时间思考这个问题的人

相关文章：