Nivo Slider - 使用 mouseenter 更改图像答案

【问题标题】：Nivo Slider - Use mouseenter to change imageNivo Slider - 使用 mouseenter 更改图像
【发布时间】：2013-05-31 14:14:59
【问题描述】：

当鼠标滑过菜单项时，我试图让 nivo 滑块图像发生变化。我创建了一个新类“nivoLink”，我可以使用“单击”来更改幻灯片。此代码完美运行：

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 插件。谢谢！

【问题讨论】：

标签： jquery mouseenter nivo-slider

【解决方案1】：

如果你对 jquery.nivo.slider.js 做一个小改动，你就可以做到这一点。通过添加以下代码，您可以创建一个额外的函数，该函数处理 ul 中 li 项目上的“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
});

【讨论】：