1

我正在使用带有手动控制的 flexslider，它工作正常。但是，当您将鼠标悬停在控件上时，我需要它们来更改幻灯片，而不是单击控件。这可能吗？我查看了js文件，找不到可以更改的点击功能。

这是 flexslider js： https ://raw.github.com/woothemes/FlexSlider/master/jquery.flexslider.js

这是我的代码：

$(window).load(function(){
    $('.flexslider').flexslider({
     animation: "slide",
     directionNav: true,
     controlsContainer: "header#site",
     manualControls: ".nav1 li"
    });
});

HTML是（简化的）这样的：

<header id="site">
<ul class="nav1">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>

<div class="flexslider">
<ul class="slides">
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
</ul>
</div>
</header>
4

6 回答 6

5

在 jquery.flexslider.js 中，您只需在第 21 行进行更改：

eventType = "click touchend MSPointerUp"

到

eventType = "mouseover touchend MSPointerUp"

所以它会做出反应，mouseover点击事件可用于链接。

于 2013-12-26T18:47:20.560 回答
1

也想知道这个问题的答案。找到了一种单独通过悬停触发它的方法，但我还需要使用点击功能，所以现在我得到了一些好斗的 js。这是我所做的允许悬停和单击以移动幻灯片的工作，但我只想完全用悬停替换单击。

    start: function(slider){

            jQuery('.custom-pagination li').mouseover(function(){
                 var activeSlide = 'false';
                 if (jQuery(this).hasClass('flex-active')){  
                    activeSlide = 'true';                       
                 }
                 if (activeSlide == 'false'){
                  jQuery(this).trigger("click"); 
                 }
             });      
        }
于 2013-08-29T21:03:45.530 回答
0 
    $(".flex-control-nav li").hover(function() { 
         $(this).parent().parent().flexslider($(this).index());
    });

仅当您将鼠标悬停在列表项而不是导航按钮上时，幻灯片才会更改。

于 2014-09-26T21:52:25.870 回答
0

我需要您能够单击 controlnav 中的链接以转到一篇文章。我建立了弗雷多的答案并将其添加到我的 flexslider 函数中：

        start: function (slider) {
        $('.top-btns a').mouseover(function () {
            $('#home-banner').flexslider($(this).index());
        });

然后，在您的 javascript 中的其他地方：

$(document).ready(function () {
    $('.top-btns a').click(function () {
        window.location.href = $(this).attr('href');
    });
});

您需要更改“.top-btns a”以将您的 controlnav 和“#home-banner”引用到您想要更改的 flexslider。然后，我将 controlnav 中每个链接的 href 设置为您希望用户导航到的页面。

于 2015-06-17T20:44:12.363 回答
0

这是解决此问题的简单方法：

jQuery('.flex-control-nav li').on('mouseenter', function () {
    $(this).trigger('click');
});
于 2016-09-08T14:24:09.580 回答
0

谢谢大家的答案对我帮助很大，我无法使用答案，因为我正在处理的项目不允许我更改 flexslider 脚本或初始化脚本。

下面的解决方案允许您在 flexslider 中拥有 manualControl 列表元素，使您能够在其中拥有自定义链接。当您悬停时，它会更改幻灯片，如果您单击它将转到页面。

//Define the navigation elements of the manualControls flexslider
            var $sb = $('.product-slider-nav li a');

//Flexslider click hover handler
            function FlexHoverHandler(event) {
                $element = $(this);
                if (event.data.event == 'mouseover') {
                    $element.trigger('click');
                }
                if (event.data.event == 'mouseup') {
                    window.location.href = $element.attr('href');
                }
            }

//Bind mouseover and mouseup 
            $sb.on('mouseover', {event: 'mouseover'}, FlexHoverHandler);
            $sb.on('mouseup', {event: 'mouseup'}, FlexHoverHandler);
于 2017-05-01T12:47:45.327 回答