Question

我正在尝试使用Ajax创建画廊，但是我的代码遇到了一些错误（这是用于家庭作业）。错误出现在我的两次拆分中的开发人员控制台上。我的网页也会打开，但没有照片显示，如何正确地从文本文件中调用照片？我是JavaScript语言的新手。谢谢。

<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style src="text/css">
.navBtn {
padding: 5px 10px;
background-color: red;
font-weight: 1000;
color: white;
}

div {
border: 2px solid black;
padding: 10px;
width: 70%;
text-align: center;
}
</style>
</head>

<body>
<div id="imgContainer">
<img id="image" />
</div>
<div>
<button class="navBtn" onclick="previous()">
<< Previous</button>
<button class="navBtn" onclick="next

()">Next >></button>
<br>
<button onclick="pageLoad.init

()">Update Image </button>
</div>

<script type="text/javascript">
var totalImage;
var currentIndex;

var pageLoad = {
imgData: "5",
pagePrefix: "Null",
slides: "5",

init: function () {
$.ajax({
url: "./images.txt",
async: false,
success: function (data) {
pageLoad.imgData = data.split

('\n');
totalImage =

pageLoad.imgData.length;
currentIndex = 0;
changeImg();
}
});
}
};
pageLoad.init();

function changeImg() {
document.getElementById

("image").setAttribute("src", "./img/" +

pageLoad.imgData[currentIndex].split(' ')[0]);
setTimeout(function () {
next();
}, pageLoad.imgData[currentIndex].split('

')[1]);
}

function previous() {
if (currentIndex == 0) {
currentIndex = totalImage - 1;
} else {
currentIndex--;
}
changeImg();
};

function next() {
if (currentIndex == totalImage - 1) {
currentIndex = 0;
} else {
currentIndex++;
}
changeImg();
};

setTimeout(function () {
next();
}, 3000);

</script>
</body

该网页打开，显示5张您可以浏览的照片

有关照片未显示在我的画廊中的几个问题

0 个答案: