超大型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.