jquery scrollto

Question

我想弄清楚如何讓它垂直滾動。 我有一切就位..這是完全相同的腳本有一個水平滾動。 我覺得我需要的jQuery代碼中有東西，但我似乎無法找到一個好的解釋。

這是我的工作。

http://www.chohoh.com/pcs/scroll.html

Answer 1

有了這個解決方案， VE包括jQuery mousewheel插件......我不喜歡，只需點擊按鈕的限制：P

而且，我沒有使用串行滾動插件

<script type="text/javascript"> 
$(document).ready(function() { 
var slideIndex = 0; 
var slideBlock = $('.tikt-txt'); 
var slideMax = slideBlock.length - 13; // leaves 13 slides showing in the window 

$('.galprev').click(function(){ 
slideIndex--; 
changeSlide(); 
}); 
$('.galnext').click(function(){ 
slideIndex++; 
changeSlide(); 
}); 
$('#slideshow').bind('mousewheel', function(e,d){ 
var speed = Math.floor(Math.abs(d)); 
if (d > 0) { 
    slideIndex = slideIndex - speed; 
} else { 
    slideIndex = slideIndex + speed; 
} 
changeSlide(); 
}); 

function changeSlide(){ 
if (slideIndex > slideMax) { 
    slideIndex = slideMax; 
} 
if (slideIndex < 0) { 
    slideIndex = 0; 
} 
$('#slideshow').stop().scrollTo(slideBlock[slideIndex],300) 
} 
}); 
</script> 

---

編輯：我LL試圖解釋這一切......我希望你能跟着我的隨筆LOL

變量

• 最上面的DIV被索引的d使用slideIndex分配一個零。
• slideBlock是一個包含所有幻燈片的數組。
• 的slideMax變量取總數slideBlock減去多少幻燈片在（在這種情況下13）一次

事件是在屏幕上可見

• 當你點擊這些函數被稱爲上一個或下一個按鈕
• 這些函數從索引中加或減1（++表示加一， - 表示減1）
• 然後他們調用函數來移動幻燈片
• 鼠標滾輪函數使用鼠標滾輪插件到車輪運動結合，並計算多遠向上或向下移動的滑動，在該滾動鼠標輪速度決定多少滾動

ScrollTo （changeSlide）函數

• 此函數確定你已經滾過的幻燈片（太遠）的最大數量或最小（太遠了）以下時，則相應地設置數量等於或最大最小位置
• 現在它停止任何動畫並且調用scrollTo函數並告訴它應該在框的頂部（slideIndex）顯示什麼樣的幻燈片號碼以及滾動到那個位置需要多長時間。

所以，如果你已經通過所有的讀取和你還在抓耳撓腮......改變：

slideIndex++到slideIndex=slideIndex+7;

和

slideIndex--到slideIndex=slideIndex-7;

Answer 2

那麼可選地，可以選擇所有類的tikt-TXT'的元素，然後通過執行通過改變頂部-10px移動元件的動畫模擬的滾動功能（向下滾動）和10px（用於滾動）。

假設您已經定位了類「tikt-txt」。

編輯：

一個簡單的例子，讓你開始：

$('.galnext').click(function() { 
    $('.tikt-txt').animate({ "top": "-=10px" }, "100"); 
}); 

$('.galprev').click(function() { 
    $('.tikt-txt').animate({ "top": "+=10px" }, "100"); 
}); 

只要確保你編輯scroll2.css並替換：

.tikt-txt {background-color:transparent;height:28px;margin:0px; padding:0px; } 

隨着

.tikt-txt {background-color:transparent;height:28px;margin:0px; padding:0px; position:relative; }