jquery文字上下循环轮播

以下是一个基于 jQuery 的文字上下循环轮播的示例代码：

<div id="slider">
  <ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Consectetur adipiscing elit.</li>
    <li>Nulla nec elit non turpis.</li>
    <li>Donec euismod turpis sed dolor.</li>
    <li>Curabitur ultricies felis quis urna.</li>
  </ul>
</div>

#slider {
  height: 100px;
  overflow: hidden;
}

#slider ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

#slider ul li {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

#slider ul li:first-child {
  display: block;
}

$(document).ready(function() {
  setInterval(function() {
    var firstItem = $('#slider ul li:first-child');
    var height = firstItem.height();
    firstItem.animate({marginTop: -height + 'px'}, 1000, function() {
      firstItem.detach().removeAttr('style').appendTo('#slider ul');
    });
  }, 3000);
});

首先将要轮播的文字放入一个 `<ul>` 列表中，每个文字对应一个 `<li>` 元素。外层包裹一个固定高度并设置 `overflow: hidden` 的 `<div>` 元素作为容器。

CSS 部分将 `<ul>` 元素设为相对定位，每个 `<li>` 元素设为绝对定位并隐藏。第一个 `<li>` 元素设为显示状态。

JavaScript 部分使用 `setInterval` 函数定时执行轮播操作。首先获取第一个 `<li>` 元素，计算其高度，然后使用 `animate` 函数将其向上移动一个自身高度的距离。移动完成后，将该元素从父元素中移除并添加到列表的末尾，以此实现循环轮播效果。