Ajax， JQuery & JavaScript - 图片未加载//显示 - Ajax, JQuery & JavaScript

我试图在Javascript中使用Ajax和JQuery创建一个图片库。我在VSC中创建了一个文件夹名为images;里面我有5选择图像。不幸的是，一旦我点击"下一步"one_answers";previous"按钮，图像不显示。在控制台中它说照片是未定义的。关于如何解决这个问题，有什么想法吗?我将非常感谢你的帮助，因为我对这一切都很陌生!下面是我的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();
});
});

考虑下面的例子:

小提琴:https://jsfiddle.net/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);
}
});
});

这个例子使用了jsfiddle的Async选项。您的AJAX代码将有所不同。我建议这样写:

$.getJSON("file.json", function(results){ })`
这将更多地清除函数，并使用.data()特性来存储元素属性中的图像、索引和间隔。这使得它们更适合不同的功能。将它们存储在全局变量中没有任何问题。如果您有不止一个，那么将它们的索引和图像列表存储在一起可以使它们易于访问。

大多数脚本将有一些图像在播放和动画的变化，给它一个幻灯片或旋转木马效果。因为你只是在显示一个，所以很容易更改源代码。

尽量简化您的代码。添加Document.getElementById到body或bodyonload，然后运行一个函数并使用<img>标签添加图像，因为这就是在JavaScript标准中添加图像的方式。

Ajax， JQuery & JavaScript - 图片未加载//显示

相关内容

最新更新

热门标签：