Question

我的问题是我无法在悬停时滚动ol元素，而右边的图像也会滚动。我知道这可能很简单。我只是不知道它是什么。

我已经在这方面工作了很长一段时间，似乎无法解决这个问题。有多个jQuery插件在悬停时为垂直缩略图添加滚动，但它们都不支持Flexslider HTML结构。这是我最大的困境。

flexslider的基本结构如下：

<div id="flexslider-object" class="flexslider">
    <ul class="slides">
        <li><img></li>
        <li><img></li>
        <li><img></li>
    </ul>
    <ol class="flex-control-thumbs">
        <li><a><img></a></li>
        <li><a><img></a></li>
        <li><a><img></a></li>
    </ol>
</div>

我尝试使用垂直列表的所有插件都破坏了导致flexslider主图像和缩略图之间同步的结构。因此，结构需要保持完整。

目前，当我将鼠标悬停在列表的每一端时，我已经获得了滚动列表。但是，主图像也是滚动的，不需要发生。这是我已经拥有的脚本：

$.fn.thumbScroller = function () {
    var div = $(this),
            wrapScreenHeight = div.height(),
            top = div.offset().top,
            $list = div.find('ol'),
            wrapHeight = div.outerHeight(),
            listHeight = div.find('ol').outerHeight() * 1.3;
    $list.on('mousemove', function (e) {
        var cPointY = e.pageY - top,
                dP = ((cPointY / wrapHeight));

        div.animate({scrollTop: (listHeight * dP) - wrapScreenHeight}, 1);
    });
};
$('#flexslider-object').thumbScroller();

我无法在jsfiddle中使用它，所以我将它发布在我的开发网站上。 http://dev.blahalife.com/flexslider_thumbs/

您可以查看来源以检查代码。视图源：http://dev.blahalife.com/flexslider_thumbs/

非常感谢任何帮助。

Answer 1

你的意思是右侧图像不应滚动吗？它应该显示左侧鼠标悬停的图像

Answer 2

在这里，你去看看这个，然后告诉我

[https://www.dropbox.com/s/wktlpq9925s9aud/stackoverflow.rar?dl=0][1]

jQuery List使用Flexslider滚动悬停

2 个答案: