javascript - 在循环中更改滚动时的缩略图

Question

我有个问题。我正在使用 wordpress，并且有一个博客，其中的帖子带有缩略图。当你把鼠标放在上面时，我希望这些缩略图发生变化。问题是我想要不同的图像更改缩略图。基本上，每个缩略图都有其独特的翻转图像。问题是我不太清楚如何将 js 代码附加到循环中。如果我将 js 代码附加到永久链接，它应该如何为不同的帖子创建不同的翻转图像
，它会将所有缩略图更改为同一张图片。另外，有人告诉我可以使用 jquery。值得吗？
我试图尽可能清楚
任何帮助表示赞赏！

Answer 1

您可以为每个帖子添加一个名为 的自定义字段hoverImg，该值是指向您要用作翻转图像的图像的链接。

然后你在循环中获取链接，并添加它：

<?php $hover_image = get_post_meta($post->ID, 'hoverImg', true); ?>

<img class="hover-img" src="<?php echo $hover_image; ?>" />  

此图像最初应该是不可见的，并且定位为缩略图的覆盖。然后用jquery在悬停时显示它。

因为我没有你的图像，所以我创建了一个带有两个 div 的 jsFiddle，一个代表你的缩略图，一个代表你的翻转图像来模仿效果：

http://jsfiddle.net/9Xa92/1/

您应该<div class="hover-img"></div>将 jsfiddle 中的 替换为实际的缩略图（在上面创建）。