Ajax，jQuery＆amp; JavaScript-图片未加载//显示

Question

我正在尝试在JavaScript中使用Ajax和jQuery创建一个照片库。 我在VSC中创建了一个名为“图像”的文件夹，其中我有5个选择的图像。 不幸的是，一旦我单击“下一个”和“上一个”按钮，图像就不会显示。在控制台中，它说照片不确定。关于如何解决这个问题有什么想法？我将非常感谢我的帮助，因为我对所有这一切都很陌生！ 以下是我的HTML和JS代码：

    <div id="content">
        <div id="picture">
            <img id="pic" src="images/image1.jpg">
        </div>
    </div>

    <div id="buttons">
        <button id="previous" type="button" class="BUTTON_AUJ">Previous</button>
        <button id="update" type="button" class="BUTTON_AUJ">Update</button>
        <button id="next" type="button" class="BUTTON_AUJ">Next</button>
    </div>

'use strict';
$(document).ready(function () {
    var max_index = null, min_index = 0;
    var timeID = null;
    var index = 0;
    var files = [];
    function changePicture(pics){
        $("#pic").attr("src", "images/" + pics);
        $("#picture").hide().fadeIn("slow");
    } 
   

    function loadImages() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState === 4) {
                files = JSON.parse(this.responseText).files;
                max_index = files.length - 1;
                changePicture(files[index]);
                rotating(files[min_index]);
            }
        };
        xhttp.open("GET", "file.html", true);
        xhttp.send();
    }

    function nextPicture(){
        if (index < max_index)
            index++;
        else 
            index = min_index;
        changePicture(files[index]);
        rotating(files[index]);
    }
    function previousPicture() {
        if (index > min_index)
            index--;
        else
            index = max_index;
        changePicture(files[index]);
        rotating(files[index]);
    }
    function rotating(filename){
        var interval = filename.split("_")[1].replace(".jpg", "") * 1000;
        if (timeID) {
            clearTimeout(timeID);
            timeID = null;
        }
        timeID = setTimeout(nextPicture, interval);
    }
    function main(){
        loadImages();
    }
    main();

    $("#next").click(function () {
        nextPicture();
    });
    $("#previous").click(function () {
        previousPicture();
    });
    $("update").click(function(){
        index = 0;
        loadImages();
    });
}); 

Answer 1

考虑以下示例。

小提琴： https：//jsfiddle.net/twist/twisty/0ku35r7b/

>

<div id="content">
  <div id="picture">
    <img id="pic" src="https://dummyimage.com/480x340/ccc/000.jpg&text=Image0">
  </div>
</div>

<div id="buttons">
  <button id="previous" type="button" class="BUTTON_AUJ">Previous</button>
  <button id="update" type="button" class="BUTTON_AUJ">Slide Start</button>
  <button id="next" type="button" class="BUTTON_AUJ">Next</button>
</div>

JavaScript

 $(function() {

  var testData = {
    files: [
      "https://dummyimage.com/480x340/ccc/000.jpg&text=Image0",
      "https://dummyimage.com/480x340/ccc/000.jpg&text=Image1",
      "https://dummyimage.com/480x340/ccc/000.jpg&text=Image2",
      "https://dummyimage.com/480x340/ccc/000.jpg&text=Image3"
    ]
  };

  function getImages() {
    var myImages = [];
    $.post("/echo/json", {
      json: JSON.stringify(testData)
    }, function(results) {
      $.each(results.files, function(i, image) {
        myImages.push(image);
      });
    });
    $("#picture").data("index", 0);
    return myImages
  }

  function changePicture(index) {
    console.log("Change to Picture " + index);
    var current = $("#picture img");
    current.hide().attr("src", $("#picture").data("images")[index]).fadeIn();
  }


  function nextPicture() {
    console.log("Next");
    var index = $("#picture").data("index");
    console.log("Current Index: " + index);
    if (++index >= $("#picture").data("images").length) {
      index = 0;
    }
    console.log("Next Index: " + index);
    changePicture(index);
    $("#picture").data("index", index);
  }

  function previousPicture() {
    console.log("Previous");
    var index = $("#picture").data("index");
    console.log("Current Index: " + index);
    if (--index < 0) {
      index = $("#picture").data("images").length - 1;
    }
    console.log("Previous Index: " + index);
    changePicture(index);
    $("#picture").data("index", index);
  }

  function startRotation() {
    var interval = 3000;
    console.log("Start Rotation", interval);
    $("#picture").data("interval", setInterval(nextPicture, interval));
  }

  function stopRotation() {
    console.log("Stop Rotation");
    clearInterval($("#picture").data("interval"));
  }

  function main() {
    console.log("INIT");
    $("#picture").data("images", getImages());
    console.log($("#picture").data("images"));
    console.log($("#picture").data("index"));
  }
  main();

  $("#next").click(nextPicture);
  $("#previous").click(previousPicture);
  $("#update").click(function() {
    if (!$(this).data("rotate")) {
      startRotation();
      $(this).html("Slide Stop").data("rotate", true);
    } else {
      stopRotation();
      $(this).html("Slide Start").data("rotate", false);
    }

  });
});

此示例使用jsfiddles async选项。您的AJAX代码将有所不同。我建议这样的东西：

$.getJSON("file.json", function(results){ })`

这会泛滥一些功能，并使用.data（）功能来存储元素属性中的图像，索引，间隔。这使它们更适合不同的功能。将它们存储在全球变量中没有错。如果您有多个，则将其索引和图像列表与它们存储使其易于访问。

大多数脚本都会在游戏中有几张图像并为更改动画，从而使其具有幻灯片表​​演或轮播效果。由于您只是显示一个，因此很容易更改来源。

Answer 2

尝试简单地代码。添加
docuct.getElementById to body或bodyonload，然后运行函数并使用＆lt; img＆gt; 标签是在JavaScript标准中添加图像的方式。