Nivo滑块 - 使用鼠标改变图像

我试图让鼠标滑过菜单项时改变滑块图像。我创建了一个新类“nivoLink”，我可以使用“点击”改变幻灯片。此代码的工作完美：Nivo滑块 - 使用鼠标改变图像

jQuery(window).load(function() { 
jQuery('.nivoLink').on('click', function(e) { 
e.preventDefault(); 
var targetImage = jQuery(this).attr('rel')-1; 
var slideNo=jQuery('.nivoSlider').data('nivo:vars').currentSlide; 
if(targetImage!=slideNo) jQuery('.nivo-control').eq(targetImage).trigger('click'); 
}); 
});

我不能使它与合作“的mouseenter”我经历过很多变化，但是这是我尝试没有成功最近的代码版本。

jQuery(window).load(function() { 
jQuery('.nivoLink').mouseenter(function() { 
var targetImage=jQuery(this).attr('rel')-1; 
var slideNo=jQuery('.nivoSlider').data('nivo:vars').currentSlide; 
if(targetImage!=slideNo) jQuery('.nivo-control').eq(targetImage).trigger('mouseenter'); 
}); 
});

网站建设在visitcvfarm.com希望我错过了一些明显的东西，因为我对JQuery很陌生。值得一提 - 这是在Wordpress网站上安装的常规版本的nivo - 不是Wordpress插件。谢谢！

来源

2013-05-31 user1454170

如果你对jquery.nivo.slider.js做一些小改动，你可以做到这一点。通过添加下面的代码，您可以创建一个额外的函数，用于处理ul类中的'mouseenter'事件，其类别为'nivoMenuControl'。

// jquery.nivo.slider.js 
// ~line 18 
var vars = { 
    currentSlide: 0, 
    currentImage: '', 
    totalSlides: 0, 
    index: 0,  // this one 
    oldIndex: 0,  // this one 
    running: false, 
    paused: false, 
    stop: false, 
}; 

// ~line 220 right after 'For pauseOnHover setting' 
// MouseEnter change slide 
if(settings.mouseEnterControl){ 
    if($('body').find('.nivoMenuControl')) { 
     $('.nivoMenuControl').children('li').mouseenter(function(){ 
      if(!vars.running){ 
       oldIndex = index; 
       index = $(this).index(); 
      }    
      if(!vars.running && (index != oldIndex)){ 
       clearInterval(timer); 
       timer = ''; 
       sliderImg.attr('src', vars.currentImage.attr('src')); 
       vars.currentSlide = index; 
       nivoRun(slider, kids, settings, 'control'); 
      } 
     }); 
    } 
} 

// bottom of file 
// Default settings 
$.fn.nivoSlider.defaults = { 
    effect: 'random', 
    slices: 15, 
    boxCols: 8, 
    boxRows: 4, 
    animSpeed: 500, 
    pauseTime: 3000, 
    startSlide: 0, 
    directionNav: true, 
    controlNav: true, 
    controlNavThumbs: false, 
    mouseEnterControl: false,  // This One 
    pauseOnHover: true, 
    manualAdvance: false, 
    prevText: 'Prev', 
    nextText: 'Next', 
    randomStart: false, 
    beforeChange: function(){}, 
    afterChange: function(){}, 
    slideshowEnd: function(){}, 
    lastSlide: function(){}, 
    afterLoad: function(){} 
};

然后在HTML，你可以做这样的：

<div id="menuSlider" class="nivoSlider"> 
    <img src="img/up.jpg" alt="" data-thumb="img/thumb_up.png" /> 
    <img src="img/walle.jpg" alt="" data-thumb="img/thumb_walle.png" /> 
    <img src="img/nemo.jpg" alt="" data-thumb="img/thumb_nemo.png" /> 
</div> 
<ul class="nivoMenuControl"> 
    <li><a href="#">Slide01</a></li> 
    <li><a href="#">Slide02</a></li> 
    <li><a href="#">Slide03</a></li> 
</ul>

而jQuery的需要这些设置：

$('#menuSlider').nivoSlider({ 
    directionNav: false, 
    controlNav: false, 
    manualAdvance: true, 
    mouseEnterControl: true 
});

而且你可以看到它住在这里，在鼠标输入页面： Example

来源

2013-08-18 18:44:43 MariusJP

Nivo滑块 - 使用鼠标改变图像

回答

相关问题