Javascript jQuery列表使用Flexslider在悬停状态下滚动

我的问题是，如果右边的图像没有滚动，我就无法让ol元素在hover上滚动。我知道这可能很简单。我只是不知道那是什么

我已经在这方面工作了相当长的一段时间，但似乎无法理解这一点。有多个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>

我无法在JSFIDLE中使用它，所以我将其发布在我的开发站点上。

您可以查看源代码以检查代码。 查看来源：

---

非常感谢您的帮助。

您的意思是右侧图像不应滚动吗？它应该显示左边有鼠标的图像

在这里，伙计，检查一下，然后告诉我

---

[

正确。我的目标是能够滚动浏览左侧的图像列表，而右侧的图像不应移动。一旦我将缩略图与主图像同步到我正在工作的网站中，就会完成。谢谢。但这并不完全是我需要的。我所说的HTML结构是它必须保持我在原始文章中提到的相同结构。因此，我必须对jQuery或cSS做一些不同的事情。我不确定现在在哪里。

$.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();