停止执行中的jquery，然后从它离开的地方继续 [英] Stop an executing jquery and then resume where it left

问题描述

好吧，我正在使用此jquery轮播插件 ...并且它可以正常工作很好(它启用了自动轮播)，但是当任何用户将鼠标移到该轮播上时，我试图使其停止，然后在鼠标移出后尝试恢复其剩余位置.我还没有做到这一点，我什至不知道如何继续尝试.这是我的轮播代码(因为很长，我要放置第一部分，毕竟重复一遍)...

Well, I am using this jquery carousel plugin...and it works just fine (it has automatic carousel enabled), however I am trying to make it stop when any user runs a mouse over the carousel and then trying to resume where it left, after the mouse is out. I have not yet managed to do this, and I'm not even sure how to continue trying. This is my carousel code (since it's very long I'm just gonna place the first part, after all it repeats)...

<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: [e-mail]<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">[e-mail]</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">[e-mail]</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">[e-mail]</div></li>
                                      </ul>
                                  </li>

这是启动jCarousel的javascript

and here's the javascript that starts 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"
    });
});

在这里，我尝试用以下方法停止已经执行的jCarousel:

and here what I've tried to stop the already executing jCarousel with:

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

推荐答案

您必须自己修改插件.如果该插件是作为jQuery UI小部件开发的，则无需修改即可轻松控制.

You'll have to modify the plugin yourself to to it. If the plugin was developed as a jQuery UI widget it would have been much easier to control without the need to modify it.

您应该扩展params对象，使其包含选项，该选项指示在鼠标悬停时应该暂停转盘，例如"pauseOnMouseOver".

You should extend the params object to include the option that will indicate that the carousel should be paused on a mouseover, eg "pauseOnMouseOver".

此外，您应该使用名为"paused"的布尔值扩展"env"对象.

Further you should extend the "env" object with a boolean value named something like "paused".

将"mouseover"事件处理程序绑定到env.$ elts.content元素，该元素将把env.paused值设置为true，并使用"mouseout"事件处理程序将其设置为false；

Bind a "mouseover" event handler to the env.$elts.content element that will set the env.paused value to true and a "mouseout" event handler to set it back to 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的语句

if (!paused)

应该可以解决问题.

这篇关于停止执行中的jquery，然后从它离开的地方继续的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！