Question

我有一个静态页面，我用它来查看图片，javascript会播放幻灯片;但是，我想将图片转储到同一目录中，当打开页面时，javascript将创建一个包含所有图片的数组，而不必为每个场景编辑数组....这可能吗？...我知道javascript在从本地文件系统读取时有一些安全限制。这里是静态页面和javascript

<!doctype html>

<html lang="en">
<head>
    <title>Picture Show</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    <script type="text/javascript" src="slideshow.js"></script>
</head>
<body>
    <!-- Insert your content here -->
    <div id="container">
        <div id="header">
            <h1>Slide Show</h1>
            <a id="link" href="javascript:slideShow()"></a>            
        </div>
        <div id="slideShow">
            <img name="image" alt="Slide Show" src="pics/0.jpg" />
        </div>
    </div>
</body>
</html>

的javascript

//javascript code for slideshow

//pictures
var imgs = [ "pics\/0.jpg", "pics\/1.jpg", "pics\/2.jpg", "pics\/3.jpg", "pics\/4.jpg", "pics\/5.jpg" ];
var imgNum = 0;
var imgsLength = imgs.length-1;
var time = 0;

//changing images function
function changeImg(n) {    
    imgNum += n;

    //last position of array
    if (imgNum > imgsLength) {
        imgNum = 0;
    }

    //first position of array
    if (imgNum < 0) {
        imgNum = imgsLength;
    }

    //console.log(images.tagName);
    document.image.src = imgs[imgNum];

    return false;
}

//slideshow function
function slideShow() {
    var tag = document.getElementById('link').innerHTML;
    if(tag == "Stop") {
        clearInterval(time); //stoping slideshow
        document.getElementById('link').innerHTML = "Start";
        document.getElementById('link').style.background = "yellow";
    }
    else { //all other cases come here
        time = setInterval("changeImg(1)", 4000);
        document.getElementById('link').innerHTML = "Stop";
        document.getElementById('link').style.background = "green";
    }
}

window.addEventListener('load', slideShow);

Answer 1

由于安全问题，无法使用浏览器内的javascript自动读取目录。你有两个选择：

制作multiple file input并让用户选择要显示的图片。他可以使用＆＃34; ctrl + a＆＃34;在一个目录中选择所有内容......当然这很糟糕，因为它需要为每个幻灯片选择一个文件。

...或

创建一个服务器端应用程序，用于上传文件或列表及其路径。这将按照您想要的方式完成，但必须在机器上安装并运行应用程序才能工作。这可以通过nodejs轻松实现，我打赌你会找到一个可以帮助你的module。

如何根据同一目录中的文件数在javascript中创建动态数组

1 个答案: