JavaScript幻灯片数组

javascript slideshow array

本文关键字：数组 幻灯片 JavaScript      更新时间：2023-09-26

我正在使用幻灯片 2 （http://www.electricprism.com/aeron/slideshow/） 在我的网站上显示几张图片，问题是图像的数量，它们的位置应该硬编码到 javascript 代码中。

我想使用数组（来自 PHP 文件输出）并以某种方式为"var 数据"分配新值，以便显示文件夹中的所有图像，而无需每次手动更新。有什么想法吗？

<script>
        window.addEvent('domready', function(){

            var data = { '5.jpg': { caption: '1' }, '2.jpg': { caption: '2' }, '3.jpg': { caption: '3' }, '4.jpg': { caption: '4' }};
            new Slideshow('overlap', data, { captions: { delay: 1000 }, delay: 3000, height: 300, hu: 'images/', width: 400 });
        });
    </script>

如果你使用PHP，那么你可以很容易地做到这一点。

假设，您有将所有文件放入如下所示的数组中的逻辑：

$foo = Array("2.jpg" => "2", "3.jpg" => "3");

表示文件名和标题

然后，您可以执行以下操作：

<?php echo json_encode($foo); ?>

以输出它。

如果要在 js 块中将其输出到变量中：

var data = <?php echo json_encode($foo); ?>;

实际上应该呈现为：

var data = [{"2.jpg": "2"},{"3.jpg": "3"}];

另外，请记住，在您的示例中，您实际上并没有使用数组，而是使用对象。两者之间有着本质的区别。在输出中，我建议你将得到一个对象数组。你会像这样循环它：

Array.each(data, function(img) {
});

但是，由于密钥是动态的，因此很难进行迭代，因此需要Object.each或Object.keys或for (var key in obj) {}才能获取属性。更好的数据结构是：

$foo = Array(Array("name" => "2.jpg", "caption" => "two"), Array("name" => "3.jpg", "caption" => "three"));

这意味着在你的JS循环中，你可以引用：

Array.each(data, function(img) {
    img.name; // filename
    img.caption; // title    
});
相关文章：