与图像幻灯片相对应的文本颜色变化

Question

我在我的网站主页上循环播放投资组合项目图像的幻灯片。我还有一个包含所有项目名称的链接列表。是否可以按特定顺序更改文本颜色，以便在显示项目图像时，项目名称/链接突出显示？
如果是这样，将图像和文本一起制作动画是否有意义？或者将它们作为两个独立的函数，并正确计时以使它们对应？

谢谢！

Answer 1

如果我理解正确的话，您有一个在幻灯片中旋转的图像列表，您还有一个显示幻灯片中每个项目的标题/链接列表。

当相应的幻灯片图像处于活动状态时突出显示正确标题的一个好方法是使用幻灯片图像 ids

example

下面是幻灯片图像列表。每个li都有一个唯一的id，我们将使用它链接到相应的标题。

<ul id="slideshow">
 <li id="project-1"><img src="image-1.jpg" /></li>
 <li id="project-2"><img src="image-2.jpg" /></li>
 <li id="project-3"><img src="image-3.jpg" /></li>
</ul>

以下是标题列表。

<ul id="titles">
 <li class="project-1"><a href="/">Project 1</a></li>
 <li class="project-2"><a href="/">Project 2</a></li>
 <li class="project-3"><a href="/">Project 3</a></li>
</ul>

现在您已经有了基本的标记，您可以编写一个函数来检查幻灯片图像何时显示，然后获取该图像的 id li，并检查是否有任何 li<标题的 ul 列表中的 /code> 具有该 id 作为它的类。

如果是的话，它会向其中添加一个改变其颜色的类。

像这样的事情：

if($('ul#slideshow li').hasClass('active'){

    var id = this.id;

    $('ul#titles').find('li.' + id).addClass('highlight');

}):

显然，我假设当前的幻灯片图像/li具有一类活动，但如果没有，这并不难做到。

此外，highlight 类将包含文本颜色的 css 属性。

抱歉，如果我偏离了目标！

Answer 2

可以通过 switch case 来实现

jquery。