1

好的，所以我试图暂停页面上的所有幻灯片动画。目前，我有三行框都使用相同的滑块脚本，共享相同的类名。我要做的是在其中一个被鼠标悬停时暂停所有 3 个动画。

我正在使用来自http://responsive-slides.viljamis.com/的响应式幻灯片脚本 这是我标记 HTML 的方式（请忽略 $smarty 语法）：

<section class="greenBox">
<ul class="rslides slider1">
<li><img src="{$smarty.const.SITEURL}/images/vane/celebs/hamilton.jpg" data-hover="  {$smarty.const.SITEURL}/images/vane/celebs/hamiltonQ.jpg" alt="Lewis Hamilton"></li>
<li><img src="{$smarty.const.SITEURL}/images/vane/celebs/downey.jpg" data-hover="{$smarty.const.SITEURL}/images/vane/celebs/downeyQ.jpg" alt="Robert Downey JR"></li>
<li><img src="{$smarty.const.SITEURL}/images/vane/celebs/mayer.jpg" data-hover="{$smarty.const.SITEURL}/images/vane/celebs/mayerQ.png" alt="John Mayer"></li>
</ul>
</section>

这是jQuery：

$(function () {
  $(".slider1").responsiveSlides({
    maxwidth: 800,
    speed: 800,
  });
});

当然我可以添加暂停：true; 规则到这一点，但是，它会暂停鼠标悬停的图像，而其他图像当然会继续改变。我想要做的是保持这些图像的顺序，所以我需要在鼠标悬停时暂停所有 3 个！

我试过使用这样的停止规则：

$(".slider1").mouseover(function(){
 $("this").stop();
});

但这并没有做任何事情。我确定这真的很简单，但是我的 jQuery 只是初学者，有什么帮助吗？

我正在处理的网站的网址是http://vane.vanillasoftware.co.uk

4

2 回答 2

0

改变

$(".slider1").mouseover(function(){
 $("this").stop();
});

为了

$(".slider1").mouseover(function(){
 $(".slider1").children().stop();
});

在这里它正在工作。

警告：

Stop 是 jQuery 动画中的方法，不是图库插件提供的方法。这可能会产生不良后果。

于 2012-11-14T13:44:06.423 回答
0

这是我在 github https://github.com/viljamis/ResponsiveSlides.js/issues/95上从开发人员那里得到的回复

于 2012-11-21T16:32:33.020 回答