Question

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

<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] + '");'}

    ]
            });
        });

我正在考虑做类似下面的事情而不能解决它，我的网络人也不能。他说这不可能，但我很固执lol

                        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] + '");'},
                        }

感谢任何帮助/见解：）

Answer 1

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。

需要能够使用JQuery在类中创建循环

1 个答案: