用JQuery移動滾動條

Question

我一直在用JQuery創建一個圖片庫，一切都完成了。這些圖像水平放置在隱藏溢出ID（不想顯示滾動條）的div內。我有兩個圖像箭頭左側和箭頭右側的鏈接。現在我想要做的是當我點擊左箭頭時，它應該顯示以前的圖像，當我點擊右箭頭圖像時，它應該顯示下一個圖像。我懷疑當用jquery點擊相應的箭頭圖像時，我將不得不向正確的方向移動滾動條。

如何做到這一點？

感謝

Answer 1

我相信你可以用scrollLeft

$("#leftArrow").click(function(){ 
    $("#divId").scrollLeft(Math.max(0, $("#divId").scrollLeft() - 100)); 
}); 

$("#rightArrow").click(function(){ 
    $("#divId").scrollLeft(Math.min(1000, $("#divId").scrollLeft() + 100)); 
}); 

通過適當的限制，而不是0和1000，你的圖像寬度，而不是100做到這一點。

---

但是，看看您的示例頁面，您有另一個問題。

你認爲你的圖片被放在這樣的：

 
    [Visible area]  [ Overflow .... ] 
.=========================._ ___ ___ ___   ___ 
X | | | | | | X | | | | . . . | | 
X___|___|___|___|___|___|_X_|___|___|___|  |___| 
"=========================" 

和水平滾動的可見區域將其他圖像變得可見。

事實上，圖像被放置這樣的：

 
    [Visible area]   
.=========================. 
X | | | | | | X 
X___|___|___|___|___|___| X 
"=========================" 
|___|___|___|___|___|___| 
| | | | | | | 
|___|___|___|___|___|___| [ Overflow ... ] 
    ... 
___ ___ ___ ___ ___ ___ 
| | | | | | | 
|___|___|___|___|___|___| 

...這樣的水平滾動沒有好處。 （圖像實際上是垂直溢出的！實際上，如果使用相同的代碼，但使用scrollTop而不是scrollLeft，則可以看到此圖像）

圖像包裝是因爲它們位於具有明確寬度的div內。

您可以通過在第一個div（與overflow:none的寬度足夠寬以容納所有圖像）中放置第二個div來解決此問題。

當你的頁面，執行

javascript: 
$("#images") 
.css("overflow", "hidden") 
.wrapInner("<div style='width:1000px'>"); 

會做的伎倆。然後如果你執行

javascript: 
$("#images").scrollLeft(10); 

你會看到水平滾動實際上工作。

Answer 2

如果你想做一個稍微性感的版本，你可以動畫滾動區域。

$("#left").click(function(){ 
    $("#scroll-holder").animate({ scrollLeft: Math.max(0, $("#scroll-holder").scrollLeft() - 250)}, 175); 
}); 
$("#right").click(function(){ 
    $("#scroll-holder").animate({ scrollLeft: Math.max(1000, $("#scroll-holder").scrollLeft() + 250)}, 175); 
});