HTML 幻灯片放映有效，但无法控制循环显示哪些图像

Question

我有一个 html 幻灯片，是我从 CodePen 上下载的。它被称为带有 CSS 淡入淡出过渡的 Vanilla JS 幻灯片。

它单独使用时效果很好，但在我的主页上它会循环浏览该页面上的所有图像。图像由以以下调用为中心的小型 Javascript 函数控制。

var current = 0,
slides =
document.getElementsByTagName("img");

我希望能够 select 只有某些图像在页面上进行幻灯片放映。其他图像，如公司标志，不应闪烁。

我试过在某个 class 中设置幻灯片图像，就像在我的 javascript 函数中使用的那样，但我对 Javascript 变量的了解不足。

来自 CodePen，请注意原始图像 "Sheen" 缺失。

HTML

<img src="http://www.fillmurray.com/400/300" alt="Fill Murray">
<img src="http://www.placecage.com/400/300" alt="Place Cage">
<img src="http://www.placesheen.com/400/300" alt="Place Sheen">

CSS

img {
position: absolute;
transition: opacity 2.5s ease-in;
}
img + img { opacity: 0.95; }

Javascript

var current = 0,
slides = document.getElementsByTagName("img");
setInterval(function() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
current = (current != slides.length - 1) ? current + 1 : 0;
slides[current].style.opacity = 1;
}, 5000);

你可以在这里看到我的独立测试页面 https://flowsimulations.com/y_testing/slideshow_codepen_v1.html

我只是无法将图像的子组显示在幻灯片中。我不会展示这样的示例，因为我不想弄乱我的主页，但如果需要，我可以制作另一个测试页面来显示不良效果。

Answer 1

向要包含在幻灯片中的所有 img 元素添加 class。假设您将 "slideshow-image" 添加到所有 img 元素。然后，在您的 javascript 代码中，将 document.getElementsByTagName("img") 替换为 document.getElementsByClassName("slideshow-image")。它应该工作得很好。

Codepen 示例 here。

Answer 2

我不太确定你是如何尝试使用类的，但这是正确的前进方向：

<img class="slide" src="something.png" alt="some description" />

然后你可以select他们相应地在JS:

var slides = document.querySelectorAll('img.slide');

HTML 幻灯片放映有效，但无法控制循环显示哪些图像

HTML slideshow works but unable to control which images cycle

html

javascript

slideshow