HTML 幻灯片可以工作，但无法控制哪些图像循环

Question

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

它独自一人时可以完美运行，但是在我的主页上，它会循环浏览该页面上的所有图像。 图像由一个以以下调用为中心的小型 Javascript 函数控制。

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

我希望能够仅选择某些图像来进行页面上的幻灯片放映。 其他图像(如公司徽标(不应闪烁。

我尝试将某个类中的幻灯片图像设置为在我的 javascript 函数中使用它，但我对 Javascript 变量的了解不足。

在代码笔中，请注意原始图像中缺少图像"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; }

爪哇语

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 元素中。假设您将"幻灯片图像"添加到所有 img 元素中。然后，在您的 JavaScript 代码中，将document.getElementsByTagName("img")替换为document.getElementsByClassName("slideshow-image")。它应该可以正常工作。

代码笔与示例在这里。

Answer 2

我不确定您是如何在类中尝试的，但这是正确的前进方向：

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

然后，您可以在JS中相应地选择它们：

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