jquery scrollto

Question

我正在试图弄清楚如何让它垂直滚动。 我已经把所有东西都放在了......它的完全相同的脚本有一个水平滚动的脚本。 我觉得我需要的jquery代码中有一些东西，但我似乎无法找到它的好解释。

这是我正在处理的链接。

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

Answer 1

有了这个解决方案，我已经加入了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>

---

编辑：我会尽力解释一下......我希望你能跟随我的漫游LOL

变量

• 使用slideIndex索引最顶层的div并为其指定零。
• slideBlock是一个包含所有幻灯片的数组。
• slideMax变量取slideBlock的总数减去屏幕上一次显示的幻灯片数量（本例中为13）

活动

• 单击上一个或下一个按钮
时会调用这些函数
• 这些函数在索引中添加或减去ONE（++表示添加一个， - 表示减去一个）
• 然后他们调用该功能来移动幻灯片
• 鼠标滚轮功能使用鼠标滚轮插件来绑定滚轮移动并计算向上或向下移动幻灯片的距离，滚动鼠标滚轮的速度决定滚动的程度

ScrollTo（changeSlide）函数

• 此功能确定您是否滚动超过最大幻灯片数量（太远）或低于最小值（太远），然后将数字设置为适当地设置为等于最大或最小位置
• 现在它会停止任何动画.stop()并调用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; }