Question

当鼠标滑过菜单项时，我正在尝试更改nivo滑块图像。我已经创建了一个新类“nivoLink”，我可以使用“click”更改幻灯片。这段代码完美无缺：

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

Answer 1

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

你可以在mouseEnter页面看到它的存在： Example

Nivo Slider - 使用mouseenter更改图像

1 个答案: