1

我想使用 jQuery Supersized 插件来创建一个完整的背景和一个将不同图像放入 DIV 的函数。通过这种方式，应该可以看到 2 个不同的图像并更改同步。不幸的是我无法完成它..我怎样才能完成这项工作或者这不可能？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<!--
    Supersized - Fullscreen Slideshow jQuery Plugin
    Version : 3.2.7
    Site    : www.buildinternet.com/project/supersized

    Author  : Sam Dunn
    Company : One Mighty Roar (www.onemightyroar.com)
    License : MIT License / GPL License
-->

<head>

    <title>Supersized - Full Screen Background Slideshow jQuery Plugin</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.min.js"></script>

    <script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
    <script type="text/javascript" src="theme/supersized.shutter.min.js"></script>

    <script type="text/javascript">

        jQuery(function($){

            $.supersized({

                // Functionality
                slide_interval          :   3000,       
                transition              :   1,          
                transition_speed        :   700,    

                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                slides                  :   [           
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg'},  
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg'}
                                            ]
            }); 

            $('#supersized2')({

                // Functionality
                slide_interval          :   3000,       
                transition              :   1,          
                transition_speed        :   700,    

                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')

                   slides : [
                                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg'},
                                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg'},
                                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg'}
                   ]                  

            });

        }); 


    </script>

</head>

<style type="text/css">
    ul#demo-block{ margin:0 15px 15px 15px; }
        ul#demo-block li{ margin:0 0 10px 0; padding:10px; display:inline; float:left; clear:both; color:#aaa; background:url('img/bg-black.png'); font:11px Helvetica, Arial, sans-serif; }
        ul#demo-block li a{ color:#eee; font-weight:bold; }
</style>


<div id="prevthumb"></div>
<div id="nextthumb"></div>

<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>

<div id="supersized2" style="position: absolute; z-index: 9999; width:400px; height: 400px; display: block;">  

</div>

4

0 回答 0