0

我一直在对这个问题进行 一些 研究，但似乎无法找到正确的答案。基本上，我希望 Supersized 在我的示例顶部的菜单中为每个链接加载不同的背景图像。换句话说，对于每个菜单项，我想加载不同的背景。

这是我的标记：

<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>
4

3 回答 3

0

希望这个文件对你有所帮助，它是我为使用 ajax/mysql/php 和 Supersized/Jquery 制作图像加载（更改图库图像）而制作的一个小教程

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

希望能帮到你。

于 2012-03-09T22:18:28.433 回答
0

你需要使用

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

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

于 2012-03-02T20:28:08.233 回答
0

像这样的东西应该可以工作，您必须传递要加载的图像编号

<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);
});
于 2014-03-11T15:07:18.587 回答