2014-10-01 94 views
0

我的問題是,我不能讓滾動的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/

任何幫助將不勝感激。

回答

0

你的意思是右側圖像不應該滾動?它應該顯示了在這裏有鼠標移到左側

+0

正確的圖像。我的目標是能夠滾動瀏覽左側圖像列表,而右側圖像不應該移動。將縮略圖與主圖像同步後,我將其實施到我正在處理的網站中。 – Josh 2014-10-01 13:54:27