-2

我有一个容器，里面包含两个主要的 div。容器的可见区域是 540px 高 x 1024px （这意味着该容器之外的任何东西都“隐藏”在视图之外。）

我想在容器内的两个主要 div 之间创建一个自动滚动，所以它从第一个 div 可见开始，等待 10 秒，然后“滚动”到第二个 div 并停止，并且不循环回到起点。

我想我必须使用 javascript 或 Jquery，因为 CSS3 动画将无法做到这一点（因为我希望动画在页面加载后开始）。我已经为我想要做的事情绘制了一个基本图像，但除此之外我不知道从哪里开始。帮助！！！

更新：我使用我所拥有的极其有限的知识在这里发布了一个更新的 js fiddle：

http://jsfiddle.net/D7Aad/16/

目前我在两张幻灯片之间有一个“淡入淡出”，想法是页面不会淡出，而是自动向下滚动到第二个 div，然后停止而不重复。

我认为我的问题可能在于 javascript 代码：

var continuous = function() {
$("#slide_one").fadeToggle(600);
$("#slide_two").fadeToggle(600);   
}

setInterval(continuous,5000);

在此处输入图像描述

如果有任何细节可以特别帮助我解释我在寻找什么，请将它们发布在评论中，我会回复你。

4

1 回答 1

0

这是一个工作小提琴

$(document).ready(function() {
    //Show both slides
    $('#slide_one, #slide_two').show();
    //Define a 2 seconds timeout before starting the animation
    setTimeout(function() {
        $('body').animate({
             //Scroll to #slide_two div
             scrollTop: $("#slide_two").offset().top
         }, 2000); // the scroll down animation will last 2 seconds
    }, 2000); // after 2 seconds, scroll down
});

来源：jQuery 滚动到元素

于 2013-04-03T10:47:15.053 回答