如何编写javascript函数以加载显式超大幻灯片 [英] How to write a javascript function to load an explicit supersized slide
问题描述
如何编写名为showSlideTwo()的javascript函数，该函数调用超大型api并更改幻灯片? 我尝试过
how can I write a javascript function called showSlideTwo() that calls the supersized api and changes the slide? I tried
$("#supersized").api.goTo(2);或
$.supersized.api.goTo(2);
它在chrome中给了我以下消息:无法调用未定义的方法'goTo'"
and it gave me the following message in chrome: "Cannot call method 'goTo' of undefined"
非常感谢您.
这是我详细尝试的:
<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似乎可用，因为标题可以阅读并且可以在警报中正确显示.
This is a complete html page, defining two slides. Clicking on the link should change to slide 2 (I even tried nextSlide()) and it does not work. The api seems to be available because the title can be read and is correctly shown with the alert.
<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>
推荐答案
好，知道了.首先，函数api.goTo()仅适用于带有slideshow: 1选项的超大对象.
Ok, got it. First of all the function api.goTo() only works for a supersized object with the option slideshow: 1.
然后事实证明这是CSS问题.没有任何CSS，我看到它会生成包含图像的li-tags.因此，您只需要在上面的示例中添加以下CSS样式行(当然，在更改选项之后即可(如果不存在progress.gif图像，则无关紧要):
Then it turned out to be a CSS problem. Without any CSS I saw that it generates li-tags containing the images. So, you just have to add the following lines of CSS style to my example above (after changing the option of course (does not matter if the progress.gif images are not there):
#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; }
感谢对此问题有任何想法的人.
Thanks to anyone who spent a thought on this question.
这篇关于如何编写javascript函数以加载显式超大幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
