Question

我正在使用jquery layerslider，想要在鼠标悬停导航栏（nav）时停止layerlider。

// Java script code
    $('document').ready(function()
               {
                // Calling LayerSlider on your selected element after the document loaded
                $('#layerslider').layerSlider({
                    responsive: true,
                    animateFirstLayer:false,
                   autostart:false,
                    skin      : 'default',
                    skinsPath : '/layerslider/skins/'
                  // showCircleTimer:false

                });
                  $('.onHoverService').mouseover (function(){
                          autoStart : false
                  });
                  $('.onHoverService').mouseout (function(){
                          autoStart : true
                  });
               });
//HTML code
        <nav class="nav-inner">
                  <div class="background_logo"><a href="http://www.blacknova.com.au/">
                 <img class="horizontal_logo" src="<?php echo $this->webroot; ?>img/bnlogohorisontal.png" height="35" >
                 <!--<img class="home_logo" src="<?php  echo $this->webroot; ?>img/home-button-white.png" height="25" >-->
                   </a>    </div>
                      <?php  echo $this->element('Menus/menuHeader');?> 
                   <div class="servicedropdownMenu">

                      <?php echo $this->element('Menus/headerServices');?>  

                  </div>
                  <div class="portfoliodropdownMenu">

                      <?php     echo $this->element('Menus/headerPortfolio');?>  

                  </div>


             </nav>

我曾尝试过上面的代码，但它无法正常工作。我是新手。提前感谢您的帮助。

Answer 1

添加pauseOnHover: true,

示例：

    $('#layerslider').layerSlider({
        responsive: true,
        pauseOnHover: true,
        animateFirstLayer:false,
        autostart:false,
        skin      : 'default',
        skinsPath : '/layerslider/skins/'
        // showCircleTimer:false
   });

Answer 2

Avi是对的，当您将鼠标悬停在滑块上时，可以通过将其添加到onpage脚本轻松地将其设置为暂停。（自版本1.6起）

请参阅http://www.docs.purethemes.net/sukces/layerslider/documentation/documentation.html#global_settings说明：

＆＃34; pauseOnHover：true或false 如果真的，当您将鼠标指针移动到LayerSlider容器上时，SlideShow将暂停。＆＃34;

Answer 3

如果函数layerSlider()正在传递包含属性或选项的对象文字{}。现在小心，因为当你致电mouseover()时，情况就不一样了。在这种情况下，您传递的参数是function，它将匿名实例化（它没有名称），如：

function(){
    // do something here
}

在你的情况下，我相信你想在滑块上调用jQuery的stop()函数。有点像：

function(){
    $('#layerslider').stop(true, true);
}

jquery layerslider：鼠标悬停在导航栏上时停止layerslider（nav）

3 个答案: