Question

我想为幻灯片中显示的每张图片单独突出显示（更改颜色）我的导航链接。

（例如：3张不同的幻灯片图片，应单独更改每个导航链接的颜色。如果图片＆＃34; A＆＃34;显示导航链接＆＃34; 1＆＃34;应将其颜色更改为黑色 - 如果图片＆＃34; B＆＃34;显示它应该将导航链接＆＃34; 2＆＃34;更改为黑色和导航链接的颜色＆＃34; 1＆＃34;为灰色...依此类推。）

这是我的导航示例：

<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。

通过某些幻灯片演示，您可以配置每次幻灯片切换时调用的回调。您可以修改幻灯片以执行此操作。插入代码，以便在转换时，它调用单独的函数，传递新的幻灯片信息。

在这个单独的功能中，您可以按照自己的意愿行事。例如，更改类名或其他元素的样式。

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

1 个答案: