提问人：elfuegoeggo 提问时间：10/13/2023 最后编辑：elfuegoeggo 更新时间：10/13/2023 访问量：41
10 图片 HTML 和 JavaScript 幻灯片没有显示所有图片？
10 picture HTML and JavaScript slideshow not showing all pictures?
问：
幻灯片中最多只显示 4 张图片，上一个按钮执行相同的操作
爪哇岛：
imgArray = new Array(10);
imgArray[0] = new Image;
imgArray[0].src = "Euclid.png";
imgArray[1] = new Image;
imgArray[1].src = "Pythagoras.png";
imgArray[2] = new Image;
imgArray[2].src = "Fibonacci.png";
imgArray[3] = new Image;
imgArray[3].src = "Descartes.png";
imgArray[4] = new Image;
imgArray[4].src = "Fermat.png";
imgArray[5] = new Image;
imgArray[5].src = "Pascal.png";
imgArray[6] = new Image;
imgArray[6].src = "Newton.png";
imgArray[7] = new Image;
imgArray[7].src = "Leibniz.png";
imgArray[8] = new Image;
imgArray[8].src = "Euler.png";
imgArray[9] = new Image;
imgArray[9].src = "Gauss.jpg";
index = 0;
function doPrevious()
{
if (index > 0)
{
index--;
document.slideshow.src = imgArray[index].src;
}
return;
}
function doNext()
{
if (index < 9)
{
index++;
document.slideshow.src = imgArray[index].src;
}
return;
}<!DOCTYPE HTML>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Mathmeticians Slide Show</title>
<script src = "MathSlide.js"></script>
</head>
<body>
<noscript>JavaScript Not Enabled!</noscript>
<h1>My Mathmetician Slide Show!!!</h1>
<br>
<img src="Euclid.png" name = "slideshow" height = "500" width = "300">
<a href = "javascript:doPrevious()">Previous</a> <a href = "javascript:doNext()">Next</a>
</body>
</html>对不起，我无法包括数学家的图像。 幻灯片只到笛卡尔，仅此而已
基本上我有包含所有 10 张图片、html 文件和 JavaScript 文件的文件夹。我认为代码会做的是从 html 文件中搜索以查找 JS 文件，尽管我想我错了
答：
0赞
Rory McCrossan
10/13/2023
#1
逻辑中的问题是由于您使用了不存在的 ，而 不存在。您需要使用 or 等方法将元素定位到 DOM 中，然后您可以更新它以匹配给定的索引。document.slideshowimgquerySelector()getElementById()src
下面是一个工作示例。另请注意，我对逻辑进行了一些修改，以更好地满足当前的最佳实践 - 例如。避免将 JS 方法引用放入 OR 属性中，并简化逻辑以保持在数组的边界内。请注意，我还设置了图像，以便您可以看到它们正在更改。hrefonclickindexalt
const slideshow = document.querySelector('#slideshow');
const prev = document.querySelector('#prev');
const next = document.querySelector('#next');
let index = 0;
prev.addEventListener('click', e => {
e.preventDefault();
index = Math.max(--index, 0);
updateSlideshow(index);
});
next.addEventListener('click', e => {
e.preventDefault();
index = Math.min(++index, imgArray.length -1);
updateSlideshow(index);
})
const updateSlideshow = (idx) => {
slideshow.src = imgArray[idx].src;
slideshow.alt = imgArray[idx].src;
}
// build your Image() array as required:
const imgArray = [];
imgArray[0] = new Image;
imgArray[0].src = "Euclid.png";
imgArray[1] = new Image;
imgArray[1].src = "Pythagoras.png";
imgArray[2] = new Image;
imgArray[2].src = "Fibonacci.png";
imgArray[3] = new Image;
imgArray[3].src = "Descartes.png";
imgArray[4] = new Image;
imgArray[4].src = "Fermat.png";
imgArray[5] = new Image;
imgArray[5].src = "Pascal.png";
imgArray[6] = new Image;
imgArray[6].src = "Newton.png";
imgArray[7] = new Image;
imgArray[7].src = "Leibniz.png";
imgArray[8] = new Image;
imgArray[8].src = "Euler.png";
imgArray[9] = new Image;
imgArray[9].src = "Gauss.jpg";#slideshow {
height: 100px;
width: 300px;
}<h1>My Mathmetician Slide Show!!!</h1>
<img src="Euclid.png" id="slideshow" />
<a href="#" id="prev">Previous</a>
<a href="#" id="next">Next</a>评论
0赞
elfuegoeggo
10/16/2023
我仍然有错误。它仍然只显示前 4 张图像，可能只是我的文件/文件夹有问题吗？
评论
ReferenceError: imgArray is not definedimgArray[0] = new Image;imgiddocument.getElementById()document.slideshow