html 实现多个文本内容，轮播效果类似gif图片

news2025/6/15 5:20:25

前几日，产品要求后端实现一个将文字转为gif图片，要用于官网首页广告栏。我想这不是前段就能实现吗，怎么还要求后端生成gif，然后前段在展示。你确定招的前段不是对手公司过来的卧底？？？

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text GIF Animation</title>
<style>
  .text-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .text-box {
    display: none;
    width: 300px;
    height: 100px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    margin: 0 10px;
    padding: 10px;
    text-align: center;
  }
  .active {
    display: block;
  }
  button {
    padding: 10px 20px;
    cursor: pointer;
  }
</style>
</head>
<body>

<div class="text-container">
  <div class="text-box" id="text1">文本1</div>
  <div class="text-box" id="text2">文本2</div>
  <div class="text-box" id="text3">文本3</div>
  <button id="skipBtn">跳过</button>
</div>

<script>
  // JavaScript 代码
  var currentIndex = 0;
  var texts = [document.getElementById('text1'), document.getElementById('text2'), document.getElementById('text3')];
  var skipButton = document.getElementById('skipBtn');
  var animationInterval;

  function startAnimation() {
    texts[currentIndex].classList.add('active');
    animationInterval = setInterval(function() {
      texts[currentIndex].classList.remove('active');
      currentIndex = (currentIndex + 1) % texts.length;
      texts[currentIndex].classList.add('active');
    }, 2000); // 每2秒切换到下一个文本
  }

  skipButton.addEventListener('click', function() {
    clearInterval(animationInterval); // 清除动画间隔
    currentIndex = texts.length - 1; // 直接跳到最后一个文本
    texts[currentIndex].classList.add('active');
  });

  // 开始动画
  startAnimation();
</script>

</body>
</html>