来自PHP数组的Javascript幻灯片

时间:2013-07-06 14:11:57

标签: php javascript arrays slideshow

我的目标是将图像从文件中拉入PHP数组,然后将该数组转换为Javascript数组,然后我可以将其用于幻灯片。这样,当我将新图像添加到文件时,我不必手动更新代码。

我正在努力使用Javascript部分。我知道我可以以某种方式使用JSON函数将PHP数组转换为Javascript数组,但我不知道如何正确使用该函数。

这是我的PHP代码,显示名为“slike”的文件中的所有图片:

 <?php
    $dir =          'slike';
    $file_display = array('jpg','jpeg','png');

    if (file_exists($dir) === false){
        echo "Directory ".$dir." doesn't exist!";
    }

    else {
        $dir_contents = scandir($dir);

        foreach ($dir_contents as $file){
            $file_typeExplode = explode('.', $file);
            $file_type = strtolower(end($file_typeExplode));

            if($file !== '.' && $file !== '..' && in_array($file_type, $file_display) === true){
                echo '<img src = "', $dir, '/', $file, '" alt ="', $file, '" />';

            }
        }
    }
?>  

1 个答案:

答案 0 :(得分:0)

不确定“转换为javascript数组”部分是什么意思,但我认为你想在javascript中构建一个数组,从你在html页面(DOM)中开始。

首先,你必须确定包含所有图片的网页元素,比如它是一个名为foo的ID:

<div id="foo">
    <img src....>
</div>

然后在javascript中迭代div的所有子元素(即你的图像)并用它们构造一个数组。

var arry = [];
var images = document.getElementById('foo').childNodes;
for(i=0; i<nodes.length; i++) {
    arry.push(nodes[i]);
}

您还可以为所有图片提供课程,并对所有document.getElementsByClassName

进行迭代