Javascript 如何将搜索到的图像添加到数组中，然后在幻灯片中逐个显示？_Javascript_Jquery_Html_Web_Slideshow

Javascript 如何将搜索到的图像添加到数组中，然后在幻灯片中逐个显示？

javascript jquery html web

Javascript 如何将搜索到的图像添加到数组中，然后在幻灯片中逐个显示？,javascript,jquery,html,web,slideshow,Javascript,Jquery,Html,Web,Slideshow,我希望通过根据搜索内容附加输出的图像，将图像添加到数组中。在我实现数组代码之前，所有的照片都会出现在页面上，大约15张。我希望将它们添加到数组中，并通过添加一个边一次显示一个。这就是我现在努力实现的目标 <!DOCTYPE html> <html> <head> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jq

我希望通过根据搜索内容附加输出的图像，将图像添加到数组中。在我实现数组代码之前，所有的照片都会出现在页面上，大约15张。我希望将它们添加到数组中，并通过添加一个边一次显示一个。这就是我现在努力实现的目标

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="imageSearch.css">
</head>
<body>
<form class="form-inline"  id="myForm" action="" method="post">

    <div class="form-group">

        <input type="text" class="form-control " id="item" name="imageSearch" placeholder="Search for an Image">
    </div> <br> <br>
    <input class="btn btn-default" type="submit" value="Submit">    <input class="btn btn-default" id="clear" type="button" value="Clear"> <br>
</form>
<div id="output"></div>

<script>
    $('#myForm').on('submit', function(e){
        e.preventDefault();
        search();
        return false;
    });
    function search() {
      var images =  new Array();
        var apiKey = '';
        $.ajax(
                {
                    type:'GET',
                    url:"https://api.gettyimages.com/v3/search/images/creative?phrase=" + $('#item').val(),
                    beforeSend: function (request)
                    {
                        request.setRequestHeader("Api-Key", apiKey);
                    }})
                .done(function(data){
                    console.log("Success with data")
                    for(var i = 0;i<data.images.length;i++)
                    {


                        images[i].src = " <img src='" + data.images[i].display_sizes[0].uri + "'/>" ;
                        $("#output").append(images[i]);

                    }
                })
                function nextImage(output)
{
    var img = document.getElementById("output");

    for(var i = 0; i < images.length;i++)
    {
        if(images[i].src == img.src) // << check this
        {
            if(i === images.length){
                document.getElementById("output").src = images[0].src;
                break;
            }
            document.getElementById("output").src = images[i+1].src;
            break;
        }
    }
}

                .fail(function(data){
                    alert(JSON.stringify(data,2))
                });
        return false;
    }
</script>
<script type="text/javascript">
  $("#clear").click(function()
  {
      $("#output").empty();

  });
</script>
</body>
</html>







$（'#myForm'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
搜索（）；
返回false；
});
函数搜索（）{
var images=新数组（）；
var-apiKey=''；
$.ajax(
{
类型：'GET'，
url:“https://api.gettyimages.com/v3/search/images/creative?phrase=“+$（'#item'）.val（），
发送前：功能（请求）
{
setRequestHeader（“Api密钥”，apiKey）；
}})
.完成（功能（数据）{
console.log（“数据成功”）
对于（var i=0；iIs），该api密钥是您的实际api密钥，您确定要将其发布到此处吗？什么起作用或不起作用？不清楚具体问题是什么。我们不知道您以前遇到过什么