Question

我正在尝试在浏览器中创建一个make shift幻灯片。

用户可以使用

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

一旦完成它就会上传它们的图像它会显示第一个图像（名为filename1.jpg），按右箭头键它会切换到filename2.jpg等......等等...... / p>

我可以弄清楚如何让幻灯片显示工作，但我似乎无法动态地工作。

以下是我所拥有的：

的JavaScript

function readURL(input) {
    var url = input.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
        var reader = new FileReader();
        reader.onload = function (e) {
        $('#img').attr('src', e.target.result);
        $("#upload").hide();
      }
        reader.readAsDataURL(input.files[0]);
    }
}

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>

Answer 1

使用以下方法管理解决此问题：

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);
    }
 }

}

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

1 个答案: