javascript - 当我的幻灯片的一张特定图像显示时更改一个链接的颜色

Question

我想为幻灯片中显示的每张图片分别突出显示(更改颜色)我的导航链接。

(例如:3 张不同的幻灯片图片应分别更改每个导航链接的颜色。如果显示图片“A”，则导航链接“1”应将其颜色更改为黑色 - 如果显示图片“B”，则应更改导航链接“2”为黑色，导航链接“1”的颜色为灰色......等等。)

这是我的导航示例:

<nav>
  <ul>
    <li><a id="link_one" href="photographer_one.html">Pothographer One</a></li>
    <li><a id="link_two" href="photographer_two.html">Pothographer Two</a></li>
    <li><a id="link_three" href="photographer_three.html">Pothographer Three</a></li>
  </ul>
</nav>

我正在使用这个 slideshow这是我在 html 中的示例:

<ul id="cbp-bislideshow" class="cbp-bislideshow">
  <li id="image_one"><img src="image_one.jpg" width="1920" height="1080" alt="image_one"/></li>
  <li id="image_two"><img src="image_two.jpg" width="1920" height="1080" alt="image_two"/></li>
  <li id="image_three"><img src="image_three.jpg" width="1920" height="1080" alt="image_three"/></li>
</ul>

我的 javascript 知识非常有限。我试图向当前图像添加一个类，并在下一个图像出现时也将其删除。这个很好用。

但是如何在幻灯片和导航之间创建交互呢？

非常感谢您的任何建议。

Answer 1

根据对该插件代码的快速扫描，您似乎必须自己修改 Javascript。

某些幻灯片放映让您配置一个回调，每次有幻灯片切换时都会调用该回调。您可以修改幻灯片来做到这一点。插入代码，以便在发生转换时调用单独的函数，传递新的幻灯片信息。

在这个单独的函数中，你可以做你想做的事。例如，更改类名或另一个元素的样式。