Question

我正在使用带有手动控件的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>

Answer 1

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

eventType = "click touchend MSPointerUp"

到

eventType = "mouseover touchend MSPointerUp"

因此它对mouseover作出反应，并且点击事件可用于链接。

Answer 2

也想回答这个问题。找到了一种单独使用悬停触发它的方法，但我也需要使用点击功能，所以现在我得到了一些好斗的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"); 
                 }
             });      
        }

Answer 3

    $(".flex-control-nav li").hover(function() { 
         $(this).parent().parent().flexslider($(this).index());
    });

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

Answer 4

我需要您能够单击controlnav中的链接转到文章。我建立了frendo的答案并将其添加到我的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');
    });
});

您需要更改＆＃34; .top-btns a＆＃34;引用你的controlnav和＆＃34; #home-banner＆＃34;对于您想要改变的柔性滑板。然后，我将controlnav中每个链接的href设置为您希望用户导航到的页面。

Answer 5

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

jQuery('.flex-control-nav li').on('mouseenter', function () {
    $(this).trigger('click');
});

Answer 6

谢谢大家的答案帮了我很多，我无法使用答案，因为我正在进行的项目不允许我更改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);

Flexslider - 可以通过悬停而不是点击来控制？

6 个答案: