[英]javascript slideshow array
我正在使用幻灯片2(http://www.electricprism.com/aeron/slideshow/)在我的网站上显示几张图片,问题是图片的数量和位置必须硬编码到javascript代码中。
我想使用一个数组(来自php文件输出),并以某种方式将新值分配给“ var data”,以便将显示文件夹中的所有图像,而无需每次手动更新。 有任何想法吗?
<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); ?>;
wich应该实际呈现为:
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
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.