10图片HTML和JavaScript幻灯片显示不显示所有图片？

k4emjkb1 于 2023-10-14 发布在 Java

关注(0)|答案(1)|浏览(89)

只有多达4张图片显示在幻灯片，上一个按钮做同样的事情
java ：

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href = "javascript:doNext()">Next</a>&nbsp;
</body>

</html>

对不起，我不能包括数学家的形象。幻灯片只会上升到笛卡尔，就是这样
基本上我有文件夹与所有10张图片，html文件和JavaScript文件。我认为代码会做的是从html文件中搜索JS文件，但我想我错了

JavaScript

来源：https://stackoverflow.com/questions/77288525/10-picture-html-and-javascript-slideshow-not-showing-all-pictures

1条答案

按热度按时间

vngu2lb81#

你的逻辑问题是因为你使用了document.slideshow，而document.slideshow并不存在。您需要在DOM中定位img元素，例如使用querySelector()或getElementById()等方法，然后可以更新其src以匹配给定的索引。
这里有一个工作的例子。还要注意，我对逻辑做了一些修改，以更好地满足当前的最佳实践-例如。避免将JS方法引用放在href或onclick属性中，并简化逻辑以将index保持在数组的边界内。请注意，我还设置了图像的alt，以便您可以看到它们正在更改。

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）回复(0）举报 2023-10-14

我来回答

10图片HTML和JavaScript幻灯片显示不显示所有图片？

1条答案

相关问题

热门标签

最新问答