jquery 上下轮播代码

jQuery 上下轮播是一种常用的网页幻灯片效果，它可以让网页上的图片或文字在页面中无限循环播放。下面是一个简单的 jQuery 上下轮播代码。

$(function() {
  var maxHeight = 0;
  $('.slider li').each(function() {
    if($(this).height() > maxHeight) {
      maxHeight = $(this).height();
    }
  });
  $('.slider').height(maxHeight);

  setInterval(function() {
    var first = $('.slider li:first');
    var height = first.height();
    first.animate({marginTop: -height}, 500, function() {
      first.remove().css('marginTop', '0');
      $('.slider').append(first);
    });
  }, 3000);
});

在这个代码片段中，我们首先使用 jQuery 选择器找到 class 为 .slider 的 div 元素，并遍历其中的 li 元素，找到其中最高的一个，并将其高度应用于 .slider 元素。这一步是为了确保在轮播过程中，所有的 li 元素都能够被完全展示。

然后，我们使用 setInterval 方法设置一个定时器，每隔3秒钟就执行一次轮播效果。在轮播效果中，我们首先找到 .slider li 中的第一个元素，并获取其高度。接着使用 animate 方法将其 marginTop 属性设置为负数，使其向上移动。当移动结束时，我们将其从 DOM 中删除，并将 marginTop 属性复位到 0。最后使用 append 方法将其插入 .slider 元素的末尾，从而实现轮播效果。