jquery layerslider:鼠标悬停在导航栏(nav）上时停止layerslider

jquery layerslider: stop layerslider when mouseover on navigation bar (nav)

本文关键字：layerslider nav 鼠标 悬停 导航 jquery      更新时间：2024-04-19

我正在使用jquery layerslider，当我将鼠标悬停在导航栏（nav）上时，希望停止layerslider。

// 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>

我试过上面的代码，但它不能正常工作。我是新手。感谢您提前提供帮助。

添加pauseOnHover: true,

示例：

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

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

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

"pauseOnHover：true或false如果是，当您将鼠标指针移动到LayerSlider容器上时，SlideShow将暂停。"

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

function(){
    // do something here
}

在您的情况下，我相信您希望在滑块上调用jQuery的stop()函数。大致如下：

function(){
    $('#layerslider').stop(true, true);
}
相关文章：