我不确定如何解决这个问题。我已经查看了 jQuery“Cycle”插件，但还没有看到任何我真正需要的例子。
你如何在 HTML 中实现缩略图列表的淡入淡出(可能是这样的:
<ul id="container">
<li class="thumbnail"> <a href="www.link1.com"> <img src="1.jpg"/></a> </li>
<li class="thumbnail"> <a href="www.link2.com"> <img src="2.jpg"/></a> </li>
<li class="thumbnail"> <a href="www.link3.com"> <img src="3.jpg"/></a> </li>
<li class="thumbnail"> <a href="www.link4.com"> <img src="4.jpg"/></a> </li>
<li class="thumbnail"> <a href="www.link5.com"> <img src="5.jpg"/></a> </li>
...more
</ul>
我创建了一个示例 .GIF 来解释我正在尝试做的事情:
-一共显示了4个框
-Jquery 将拉出列表中的下一个图像，并将其淡入 4 个框之一(每次都是随机框)。 (图像将淡入框中的最后一张图像)。
- 只有当列表中有超过 4 张图像时才会发生这种情况。 (如果我们只有 4 个，则保持静态)
-希望能够通过 HTML 添加更多图像，而不是在 JS 中...
----更新------ Kalle 似乎有正确的解决方案，唯一缺少的是能够控制您始终看到多少可见缩略图的能力。
最佳答案
我为您的问题工作了 5(+ 2，版本 1.1)小时。最大的问题是两个元素之间的切换。事实证明，没有任何“交换”功能。所以我做了一个替代方案。你不能让这个渐变过渡更好，但它相当接近你的 GIF。如果你只想把它们换成漂亮的和脏的，没有任何褪色……那么这很容易做到。
无论如何，我组成了一个插件:
JoeShuffle v1.1
一个简单的 jQuery 插件来随机播放列表。非常容易安装和使用。像任何其他 jQuery 插件一样工作。只需将 jQuery 添加到您的页面，包括脚本和必要的 css 文件。然后，将它调用到某个列表中，瞧!您可以像这样更改间隔速度:$('#JoeShuffle').JoeShuffle({intervalSpeed: 2000});
从 Ver 1.1 开始，还会在第一次加载时随机化列表，并允许将此脚本挂接到多个列表。您也可以设置最大值。显示元素数:
$('#JoeShuffle').JoeShuffle({displayElements: 4}); .
JoeShuffle v1.1 [ Download (33.54 KB)- View demo (jsfiddle)]
JoeShuffle v1.0 [ Download (65.12 KB) - View demo (jsfiddle)]
注意事项
我不确定它是如何跨浏览器的，而且它是非常肮脏的原始插件。当然可以使用一些优化，但它确实有效。
我的示例使用彩色框，但 li 中是否有图像或其他内容并不重要元素。
一些特点:
- 记住最后一个插槽/位置，即进行交换的位置，并且不会再次使用它。否则它看起来有点奇怪
- 您可以设置自己的自定义间隔速度
- 随机播放列表标签之间的任何内容。但是，您应该将它们全部保持为同一种尺寸
- (v1.1) 在第一次加载时随机化 ul 列表中的所有元素。
- (v1.1) 允许您设置最大值。一次显示的元素数量
- (v1.1) 使您能够将此脚本同时挂接到多个列表
目前它是这样工作的。无论你在li里面放什么元素，它将洗牌。如果你有 5 个元素，那么它会隐藏一个。然后基本上采用隐藏元素并将其与一些随机元素交换。但是，我将在大约 15 小时内重新访问它并添加选项，您可以设置要显示的数量。所以您实际上可以在列表中包含 10 个元素，但此时您只会显示 4 个，以便使随机化更加动态。
版本 1 注释
因为您想在第一次加载时将它们随机化。然后我添加了 rand() plugin到这个脚本。这样它就成为了第一个 hide()循环非常整洁，也可以作为完整列表的随机化器。甚至认为它实际上不会单独随机化列表。这意味着它更快。正如我在票据内的评论中提到的， rand() plugin亚历山大·沃林 (Alexander Wallin) 的作品，是您 jQuery 收藏中的必备品。
如您所见，从现在开始您可以将它挂接到多个列表。那以及向列表中添加更多元素出现了一个新问题。脚本加载缓慢，所有元素在第一次加载时会显示几毫秒。我通过在 <head> 中添加包含的脚本解决了这个问题。而不是在页面内容之后。这样脚本就会在元素之前加载..这意味着一切都很顺利。
虽然我不知道会发生什么，如果 displayElements选项设置得较低，则列表中的实际元素计数。最好避免这种情况。
此外，如果您注意到元素在 CSS 中一起 float 。您也可以使用 display: inline-block; ，但是 inline-block不是很跨浏览器，所以我用了float .然而，这意味着，在元素下你应该有 clear: both;以某种形式……或者甚至是列表周围的一些包装器。
关于javascript - 使用 Jquery 连续淡化缩略图列表(始终只显示 4 个？)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7355905/