与图像幻灯片对应的文本颜色更改

Question

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

谢谢！

Answer 1

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

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

示例

以下是幻灯片显示的图片列表。每个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列表中的s具有该类的ID。

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

这样的事情：

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

    var id = this.id;

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

}):

显然我假设当前的幻灯片图片/ li有一个活跃的类，但如果不这样做就不难做到。

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

对不起，如果离开标记！

Answer 2

  

可以通过

中的开关案例来实现      

jquery的。