html 实现多个文本内容，轮播效果类似gif图片-编程知识

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

前几日，产品要求后端实现一个将文字转为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>