带有动态图像的手动JavaScript幻灯片

我正在尝试在浏览器中创建一个临时幻灯片

用户将能够使用

<input type='file' id="upload" multipule>

CSS

#slides {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -1;
}
#slides img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

HTML

<div id="upload" class="container">
    <form action="">
     Upload Slides:<input type='file' id="upload" multiple onchange="readURL(this)" />
    </form>
</div>
<div id="slides">
  <img id="img" src="#" alt="your image" />
</div>

上载幻灯片：

通过以下方法解决此问题：

var img = new Array();
var uploadIndex = 0;
var imageIndex = 0;

function readURL(input) {
 if (input.files && input.files[0]) {
    var fileList = input.files;
    for (var i = 0, file; file = fileList[i]; i++) {
        var reader = new FileReader();

        reader.onload = function (e) {
            img[uploadIndex] = new Image();
            img[uploadIndex].src = e.target.result;

            if (uploadIndex === 0) {
                $('#img').attr('src', img[0].src);
                $("#uploadForm").hide();
            }

            uploadIndex++;
        };
        reader.readAsDataURL(input.files[i]);
    }

 }
}

document.onkeydown = checkKey;

function checkKey(e) {

 e = e || window.event;

if (e.keyCode == '37') {
    if (imageIndex === 0) {
        //do nothing
    } else {
        imageIndex--;
        $('#img').attr('src', img[imageIndex].src);
    }
}
if (e.keyCode == '39') {

    if (imageIndex >= uploadIndex) {
        //do nothing
    } else {
        imageIndex++;
        $('#img').attr('src', img[imageIndex].src);
    }
 }

}

var img = new Array();
var uploadIndex = 0;
var imageIndex = 0;

function readURL(input) {
 if (input.files && input.files[0]) {
    var fileList = input.files;
    for (var i = 0, file; file = fileList[i]; i++) {
        var reader = new FileReader();

        reader.onload = function (e) {
            img[uploadIndex] = new Image();
            img[uploadIndex].src = e.target.result;

            if (uploadIndex === 0) {
                $('#img').attr('src', img[0].src);
                $("#uploadForm").hide();
            }

            uploadIndex++;
        };
        reader.readAsDataURL(input.files[i]);
    }

 }
}

document.onkeydown = checkKey;

function checkKey(e) {

 e = e || window.event;

if (e.keyCode == '37') {
    if (imageIndex === 0) {
        //do nothing
    } else {
        imageIndex--;
        $('#img').attr('src', img[imageIndex].src);
    }
}
if (e.keyCode == '39') {

    if (imageIndex >= uploadIndex) {
        //do nothing
    } else {
        imageIndex++;
        $('#img').attr('src', img[imageIndex].src);
    }
 }

}