logo标签列表

如何在鼠标悬停时旋转缩略图图像？

javascriptimagerotationrotator
3
寻找JS库或代码片段（允许使用jQuery），可以在用户将光标移动到图像后旋转图像。例如，在Dailymotion.com网站上，视频缩略图已实现此功能。
我将在包含20-40个缩略图（应用程序截图）的网页上使用此代码，并且每个项目包含大约10个附加图像，当用户将光标移动到缩略图时，应开始旋转图像，并在光标离开时停止旋转。
我不想在HTML代码中加载所有这些图像，因为这是不必要的数百个请求，每次用户进入页面时都会发生。
不幸的是，我找到的所有代码都使用HTML代码中的静态图像链接。
我尝试在搜索引擎中查找答案，但找不到正确的表述。我尝试了“image rotator JS”，“change images on hover”，“auto rotate images”和其他一些变体，也许这个任务只是有另一个我错过的名称。
尝试寻找一个在鼠标悬停时播放的幻灯片脚本。 - dee-see
1
所以你希望在悬停期间旋转图像？你是指幻灯片旋转，还是实际顺时针/逆时针旋转？ - Orbling
在进行了几天的调查后，我发现，似乎每个创建幻灯片脚本的人都认为下一个和上一个按钮是实现导航的唯一方式。 - Galichev Anton
2个回答
1

尝试使用 Cycle 插件。

如果你有一个名为 .thumb 的类，那么你可以使用 .cycle('pause') 和 .cycle('resume') 命令来控制它。

$('.thumb').cycle({ ... }).cycle('pause'); // setup, choose your own settings, then pause

$('.thumb').hover(function() {
  $(this).cycle('resume');
}, function() {
  $(this).cycle('pause');
});
如果您检查Cycle插件的源代码，您会发现图像是在HTML代码中定义的。这不是我可以使用的解决方案，因为在我的情况下，一个页面将有大约200个图像请求。 - Galichev Anton
@Galichev Anton：如果你更仔细地看这些例子，你会发现这是可能的：http://jquery.malsup.com/cycle/add3.html - Orbling
感谢您的帮助。不幸的是，即使这个实现方式（请查看限制部分和前面的句子）也需要大量的代码更改。在这种情况下，我并没有看到插件本身的价值。我不需要转换效果，也不想为每个项目加载两张图片，因为这比我任务所需的两倍还多。 - Galichev Anton
@Galichev Anton：我同意，但是你给我的印象是你想要一个插件而不是自己编写它。 - Orbling
0
很遗憾，我无法完全正确地描述。当光标进入缩略图时，幻灯片将开始播放。当光标离开缩略图时，幻灯片将结束。图像是动态加载的，当用户移出光标时，他会看到在幻灯片中显示的最后一张图片。对我来说，这似乎是一个相当明显的实现，奇怪的是我找不到可行的解决方案。 - Galichev Anton
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接