javascript - 如何从一组图像中选择一个图像（使用上一个/下一个箭头循环）并上传

Question

我正在编写一个脚本，它允许用户从 url 搜索和查找图像。我明白了，并且可以在数组中获取图像（一个或多个）的 url。我想一次显示一个图像，带有<<prev和next>>按钮，并在表单中提供一个上传按钮。

关于如何实现内联幻灯片并上传用户选择的图像的任何提示？

例如：

<div id="imgSelected">

  <img src="img1.jpg">
  <img src="img2.jpg">
</div>

<form>
  <input type='hidden' value='img1.jpg>
  <input type=text' placeholder='title'>
  <input type='submit' value='upload'>
</form>

我可以使用 jquery 循环（http://malsup.com/jquery/cycle2/）之类的东西来显示下一个/上一个按钮并循环图像。但是当这种情况发生时，如何更新图像 src 表单中的值？

Answer 1

你可以尝试这样的事情：

http://jsfiddle.net/EpjYe/

$(document).ready(function () {
    var all_images = $("#images").children(".image");
    var cur_selected = all_images.filter(".image-selected");
    checkNoneSelected(all_images, cur_selected);

    $("#prev").on("click", function () {
        var all_images = $("#images").children(".image");
        var cur_selected = all_images.filter(".image-selected");

        if (!checkNoneSelected(all_images, cur_selected)) {
            cur_selected = moveImage(all_images, cur_selected, -1, 0);
            $("#hidden1").val(cur_selected.prop("src"));
        }
    });

    $("#next").on("click", function () {
        var all_images = $("#images").children(".image");
        var cur_selected = all_images.filter(".image-selected");

        if (!checkNoneSelected(all_images, cur_selected)) {
            cur_selected = moveImage(all_images, cur_selected, 1, all_images.length-1);
            $("#hidden1").val(cur_selected.prop("src"));
        }
    });
});

function checkNoneSelected(all_images, cur_selected) {
    if (cur_selected.length === 0) {
        all_images.first().addClass("image-selected");
        return true;
    }
    return false;
}

function moveImage(all_images, cur_selected, direction, end_pos) {
    var cur_index = all_images.index(cur_selected);

    if (cur_index !== end_pos) {
        var new_index = cur_index + direction;
        cur_selected.removeClass("image-selected");
        cur_selected = $(all_images[new_index]);
        cur_selected.addClass("image-selected");
    }

    return cur_selected;
}

当然，您必须使用一致id和class属性，因为我的只是一个示例。