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

的javascript

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：

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

Answer 1

你必须自己修改插件。如果插件是作为jQuery UI小部件开发的，那么在不需要修改它的情况下控制就容易得多。

你应该扩展params对象以包含一个选项，该选项将指示轮播在鼠标悬停时应暂停，例如“pauseOnMouseOver”。

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

将“mouseover”事件处理程序绑定到env。$ elts.content元素，该元素将env.paused值设置为true，并将“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语句，如

if (!paused)

这应该可以解决问题。

停止执行jquery然后从它离开的地方继续

1 个答案: