1

所以基本上我有一个数组，其中包含一个图像链接和一个数组中的描述，然后调用它来加载幻灯片中的元素。但是，它没有设置为循环，因此在调用时效率低下，并且必须手动输入每个数组索引才能获得将图像调用到幻灯片中所需的一切。见下文：

<head>
    <title></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="css/supersized.shutter.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/colorbox.css" type="text/css" media="screen" />

    <script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.easing.min.js"></script>
    <script type="text/javascript" src="scripts/supersized.3.2.7.js"></script>
    <script type="text/javascript" src="scripts/supersized.shutter.js"></script>
    <script type="text/javascript" src="scripts/jquery.colorbox-min.js"></script>
    <script type="text/javascript" src="scripts/jquery.colorbox.parentsetup.js"></script>

    <script type="text/javascript">

        jQuery(function($){

            //image url, image title
            var data = [
                ['images/events/2012/bimmer_cruise/image_01.jpg', ''],
                ['images/events/2012/bimmer_cruise/image_02.jpg', ''],
                ['images/events/2012/bimmer_cruise/image_03.jpg', ''],
                ['images/events/2012/bimmer_cruise/image_04.jpg', '']

                ];

            $.supersized({

                // Functionality
                slide_interval  :   3000,       // Length between transitions
                transition      :   3,      // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-                                           // Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-                                         // Carousel Left
                transition_speed:   700,        // Speed of transition

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

                slides          :   [           // Slideshow Images

                    {image : data[0][0], title : data[0][1], 
                     thumb : data[0][0], 
                     url   : 'colorbox_onclick("' + data[0][0] + '");'},

                    {image : data[1][0], title : data[1][1], 
                     thumb : data[1][0], 
                     url   : 'colorbox_onclick("' + data[1][0] + '");'},

                    {image : data[2][0], title : data[2][1], 
                     thumb : data[2][0], 
                     url   : 'colorbox_onclick("' + data[2][0] + '");'}, 

                    {image : data[3][0], title : data[3][1], 
                     thumb : data[3][0], 
                     url   : 'colorbox_onclick("' + data[3][0] + '");'}

    ]
            });
        });

我正在考虑做类似下面的事情，但无法弄清楚，我的网络人也不能。他说这是不可能的，但我很固执，哈哈

                        for (var i = 0; i < data.length; i++) {

                            {image : data[i][0], title : data[i][1], 
                            thumb : data[i][0], 
                            url   : 'colorbox_onclick("' + data[i][0] + '");'},
                        }

任何帮助/见解表示赞赏:)

4

1 回答 1

0 
slides = [];
for (var i = 0; i < data.length; i++) {
    slides.push({image : data[i][0], title : data[i][1], 
                 thumb : data[i][0], 
                 url   : 'colorbox_onclick("' + data[i][0] + '");'}
                });
}

然后slides在选项中使用$.supersized。

于 2013-02-11T15:55:33.687 回答