1

わかりましたので、ページ上のすべてのスライド アニメーションを一時停止しようとしています。現時点では、同じスライダー スクリプトを使用し、同じクラス名を共有する 3 つの行のボックスがあります。私がやろうとしているのは、これらの 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,
  });
});

もちろん、pause: true; を追加することもできます。これにルールを適用しますが、マウスオーバーした画像を一時停止し、他の画像はもちろん変更を続けます。私がやろうとしているのは、これらの画像を順番に保つことなので、マウスオーバーで3つすべてを一時停止する必要があります!

次のような停止ルールを使用してみました。

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

しかし、これは何もしていません。これは本当に簡単だと思いますが、私の jQuery は初心者レベルにすぎません。

私が取り組んでいるサイトの URL はhttp://vane.vanillasoftware.co.ukです。

4

2 に答える 2

0

これは、github で開発者から得た応答です https://github.com/viljamis/ResponsiveSlides.js/issues/95

于 2012-11-21T16:32:33.020 に答える
0

変化する

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

為に

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

ここで動作しています。

警告:

Stop は jQuery アニメーションのメソッドであり、ギャラリー プラグインによって提供されるメソッドではありません。これにより、望ましくない結果が生じる可能性があります。

于 2012-11-14T13:44:06.423 に答える