1

当鼠标滑过菜单项时，我试图让 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 插件。谢谢！

4

1 回答 1

0

如果你对 jquery.nivo.slider.js 做一个小改动，你就可以做到这一点。通过添加下面的代码，您可以创建一个额外的函数，该函数处理 ul 中具有类“nivoMenuControl”的 li 项目上的“mouseenter”事件。

// 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
});
于 2013-08-18T18:44:43.667 回答