Question

我在这个问题上一直是doing some research，但似乎找不到合适的答案。基本上，我希望Supersized为我的示例here顶部的菜单中的每个链接加载不同的背景图像。换句话说，对于每个菜单项，我想加载不同的背景。

这是我的标记：

<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 &amp; Opening Hours</a>
                    </li>  
                    <li>   
                        <a href="#contact">Contact us</a>
                    </li>
                </ul>
        </div>

Answer 1

您需要使用

$('a[href="#newsletter"]').click(function(){
    api.goTo(2); 
});

获取<a href="#newsletter">元素。

Answer 2

希望这个文件可以帮助你，它是一个用make作为图像加载（改变图库图像）的一个小教程，用ajax / mysql / php和Supersized / Jquery

http://www.mediafire.com/?3hvw7ybic551w8b

希望帮助你。

Answer 3

这样的东西应该有用，你必须传递你想要加载的图像编号

<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);
});

超级Goto API onClick

3 个答案: