jquery文字轮播图

这里是一个简单的 jQuery 文字轮播图实现的示例：

HTML 代码：

<div class="slider">
  <div class="slider-text">
    <h1>第一条文字</h1>
    <h1>第二条文字</h1>
    <h1>第三条文字</h1>
  </div>
</div>

CSS 代码：

.slider {
  width: 100%;
  height: 100px;
  overflow: hidden;
  position: relative;
}

.slider-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.slider-text h1 {
  font-size: 24px;
  margin: 0;
  padding: 0 20px;
  white-space: nowrap;
  animation: slide 10s linear infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

JavaScript 代码：

$(document).ready(function() {
  $('.slider-text h1:gt(0)').hide();
  setInterval(function() {
    $('.slider-text h1:first-child').fadeOut(0)
      .next('h1').fadeIn(1000)
      .end().appendTo('.slider-text');
  }, 3000);
});

通过以上代码，文字轮播图将会每隔 3 秒轮播一次，并且会无限循环。您可以根据需要对 CSS 样式进行修改来适配您的网站。