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

【问题标题】：text color change that corresponds with an image slideshow与图像幻灯片相对应的文本颜色变化
【发布时间】：2012-02-04 18:19:48
【问题描述】：

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

谢谢！

【问题讨论】：

我的答案是你想要的吗？

标签： javascript jquery css

【解决方案1】：

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

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

示例

以下是您的图片幻灯片列表。每个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，并检查标题中是否有任何 lis ul list 具有该 id 作为它的类。

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

类似这样的：

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

    var id = this.id;

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

}):

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

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

对不起，如果我离题了！

【讨论】：

【解决方案2】：

可以通过switch case in来实现

jquery.

【讨论】：