超大型Goto API onClick
[英]Supersized Goto API onClick
问题描述
我一直在做 一些 研究这个问题，但不能完全似乎找到正确的答案。 基本上，我想为超大型加载不同的背景图片在菜单上我的例子顶部的每一环节在这里 。 换句话说，对于每个菜单项，我想加载不同的背景。
这是我的标记：
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/supersized.3.2.6.js"></script>
<script type="text/javascript" src="theme/supersized.shutter.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("body").addClass("has-js");
$("form").bind("submit",function(event){
event.preventDefault();
});
$("#banner a").bind("click",function(event){
event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
}, 1200);
});
});
</script>
<script type="text/javascript">
jQuery(function($){
$.supersized({
// Functionality
random: 1,
slide_interval:3000,
transition: 6,
transition_speed : 1000,
// Slideshow Images
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
],
});
});
$("#newsletter").click(function(){ api.goTo(2); });
</script>
</head>
<body>
<div id="banner">
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#newsletter">Newsletter</a>
</li>
<li>
<a href="#directions">Directions & Opening Hours</a>
</li>
<li>
<a href="#contact">Contact us</a>
</li>
</ul>
</div>
3 个解决方案
解决方案1
0 2014-03-11 15:07:18
这样的事情应该起作用，您必须传递要加载的图像编号
<a href="#" class="link_class01"><span>Menu Item 1</span></a>
<a href="#" class="link_class02"><span>Menu Item 2</span></a>
$(".link_class01").click(function(){
api.goTo(1);
});
$(".link_class02").click(function(){
api.goTo(2);
});
解决方案2
0 2012-03-02 20:28:08
您需要使用
$('a[href="#newsletter"]').click(function(){
api.goTo(2);
});
获取<a href="#newsletter">元素。
解决方案3
0 2012-03-09 22:18:28
希望此文件对您有帮助，它是我制作的一个小教程，用于使用Supersized / Jquery用ajax / mysql / php进行图像加载（更改画廊图像）
http://www.mediafire.com/?3hvw7ybic551w8b
希望可以帮助您。
超大的WP API调用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.