jquery 上下切换滚动

JQuery是一种流行的JavaScript框架，广泛用于构建交互式Web应用程序，其中包括滚动效果。本文将演示如何使用JQuery实现上下切换滚动。

$(document).ready(function() {
  setInterval(function() {
    var first = $('.slide-img').first();
    var height = first.outerHeight(true);
    first.animate({marginTop: -height}, 800, function() {
      first.appendTo('.slider').css({marginTop: 0});
    });
  }, 3000);
});

首先，在文档加载完成后，创建一个名为“slide-img”的CSS类，并将其放在要滚动的元素上。然后，使用setInterval函数调用每3秒滚动一次的函数。

首先获取第一个滚动图像，然后获取其高度并使用animate函数将其向上移动。设置动画持续时间为800毫秒。在动画完成后，将第一个图像放回到滑块中，然后将其顶部边距重置为零。

通过使用JQuery的animate函数，可以使滚动效果更流畅，而不是简单地更改样式属性。此外，通过将第一个图像移到最后一个图像之后，可以创建一个无限滚动的效果。

此代码只是JQuery中滚动的一个基本示例。您可以更改时间间隔，动画速度和其他效果以适合您的网站。