我的問題是,我不能讓滾動的ol元素滾動沒有右側的圖像也滾動。我知道這可能很簡單。我只是不知道它是什麼。與Flexslider懸停jQuery列表滾動
我一直在爲此工作了很長時間,似乎無法弄清楚這一點。有多個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/
您可以查看源代碼以查看代碼。 view-source:http://dev.blahalife.com/flexslider_thumbs/
任何幫助將不勝感激。
正確的圖像。我的目標是能夠滾動瀏覽左側圖像列表,而右側圖像不應該移動。將縮略圖與主圖像同步後,我將其實施到我正在處理的網站中。 – Josh 2014-10-01 13:54:27