実行中のjqueryを停止してからどこに戻ったか

Question

まあ、私はthis jquery carousel pluginを使用しています...それはうまくいきます（自動カルーセルが有効になっています）。しかし、ユーザーがマウスを動かすと停止するようにしていますカルーセルを開き、マウスが外に出た後にどこかに戻って再開しようとしています。私はまだこれをやっていないし、どうやって試し続けるかもわからない。これは私のカルーセルコード（それは非常に長いですので、私はそれが繰り返され、すべての後にちょうどつもり場所最初の部分、よ）...

<div id="expertos" class="carrusel_expertos"> 
           <ul> 
            <li> 
             <img class="izq" id="fernandocavazos" height="88px" width="77px" src="assets/img/expertos/equipo7.jpg" alt="Dr. Fernando Cavazos" title="Dr. Fernando Cavazos<br /><br /> 
             Director de Servicios T&eacute;cnicos ABS Am&eacute;rica Latina<br /> 
             Residencia: M&eacute;xico<br /> 
             Email: fernandocavazos@absmexico.com.mx<br /> 
             Medico Veterinario - Universidad Nacional Aut&oacute;noma, M&eacute;xico <br /> 
             Fisiolog&iacute;a Reproductiva - Universidad de Edimburgo, Escocia<br /> 
             <br /> 
             Fernando esta a cargo de los programas de actualizaci&oacute;n para el equipo de servicios t&eacute;cnicos de Am&eacute;rica Latina. Sus &aacute;reas de especializaci&oacute;n incluyen manejo reproductivo en ganado de leche y carne, procedimientos de orde&ntilde;o y salud de la ubre, evaluaci&oacute;n del confort e instalaciones y salud del hato. 
             " />  
             <ul id="textcontainer_der"> 
              <li><div id="nombre_experto">Dr. Fernando Cavazos</div></li> 
              <li><div id="residencia_experto">M&eacute;xico</div></li> 
              <li><div id="mail_experto">fernandocavazos@absmexico.com.mx</div></li> 
             </ul> 
            </li> 
            <li> 
             <img class="der" height="88px" width="77px" src="assets/img/expertos/equipo8.jpg" alt="Dr. Dr. Hernando L&oacute;pez" />  
             <ul> 
              <li><div id="nombre_experto">Dr. Hernando L&oacute;pez</div></li> 
              <li><div id="residencia_experto">USA</div></li> 
              <li><div id="mail_experto">hlopez@absglobal.com</div></li> 
             </ul> 
            </li> 
            <li> 
             <img class="izq" height="88px" width="77px" src="assets/img/expertos/equipo9.jpg" alt="Dr. Neil Michael" /> 
             <ul id="textcontainer_der"> 
             <li><div id="nombre_experto">Dr. Neil Michael</div></li> 
              <li><div id="residencia_experto">USA</div></li> 
              <li><div id="mail_experto">nmichael@absglobal.com</div></li> 
             </ul> 
            </li> 

であり、ここでjCarousel

var carousel = $(function(){ 
    $("div.carrusel_expertos").carousel({ 
     direction: "vertical", 
     loop: true, 
     dispItems: 3, 
     nextBtn: "<span></span>", 
     prevBtn: "<span></span>", 
     autoSlide: true, 
     autoSlideInterval: 6000, 
     delayAutoSlide: 2000, 
     effect: "fade" 
    }); 
}); 

を開始javascriptのだとここで私は既に実行中のjCarouselを停止しようとしました：

$(function() { 
    $('#expertos').mouseover(function() { 
     //$(this).stop(); 
       $(this).die("mouseover",carousel); 
     }).mouseout(function() { 
     //$(this).carousel(); 
       $(this).live("mouseout",carousel); 
    }); 
}); 

Answer 1

プラグインを自分で修正する必要があります。プラグインがjQuery UIウィジェットとして開発された場合、プラグインを変更する必要なくコントロールするのがはるかに簡単でした。

paramsオブジェクトを拡張して、マウスオーバーでカルーセルを一時停止する必要があることを示すオプションを含める必要があります（pauseOnMouseOverなど）。

さらに、 "env"オブジェクトを "paused"のようなブール値で拡張する必要があります。

"mouseover"イベントハンドラをenv.paused値をtrueに設定するenv。$ elts.content要素にバインドし、 "mouseout"イベントハンドラをfalseに戻すようにバインドします。

は、セクションを探す：行で

  // Launch autoslide 
      if (env.params.autoSlide){ 
       window.setTimeout(function(){ 
        env.autoSlideInterval = window.setInterval(function(){ 
         env.$elts.nextBtn.click(); 
        }, env.params.autoSlideInterval); 
       }, env.params.delayAutoSlide); 
      } 

env.$elts.nextBtn.click(); 

は、トリックを行う必要があり

if (!paused) 

のようなif文を追加します。