gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 20:08:33 24 4
gpt4 key购买 nike

如何编写一个名为 showSlideTwo() 的 JavaScript 函数来调用超大 api 并更改幻灯片?我试过了

    $("#supersized").api.goTo(2);

or

$.supersized.api.goTo(2); 

and it gave me the following message in chrome: "Cannot call method 'goTo' of undefined"

Thank you very much.

This is what I tried in detail:

<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 中,如下所示。而且似乎 supersized 添加了一个全局 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>

关于javascript - 如何编写 JavaScript 函数来加载显式的超大幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7197577/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com