当前位置：首页 > JavaScript

js实现3秒一切换

2026-01-31 10:59:21JavaScript

使用 `setInterval` 实现定时切换

通过 setInterval 设置一个每 3 秒执行一次的函数，切换内容或样式。以下是一个简单的示例，切换元素的显示内容：

let currentIndex = 0;
const items = ['内容1', '内容2', '内容3'];
const element = document.getElementById('switch-content');

setInterval(() => {
  currentIndex = (currentIndex + 1) % items.length;
  element.textContent = items[currentIndex];
}, 3000);

使用 `setTimeout` 实现递归切换

通过递归调用 setTimeout 实现切换，避免 setInterval 可能带来的累积问题：

js实现3秒一切换

let currentIndex = 0;
const items = ['内容1', '内容2', '内容3'];
const element = document.getElementById('switch-content');

function switchContent() {
  currentIndex = (currentIndex + 1) % items.length;
  element.textContent = items[currentIndex];
  setTimeout(switchContent, 3000);
}

switchContent();

结合 CSS 动画实现平滑切换

通过添加 CSS 过渡效果，实现更平滑的切换体验：

let currentIndex = 0;
const items = ['内容1', '内容2', '内容3'];
const element = document.getElementById('switch-content');

function switchWithFade() {
  element.style.opacity = 0;
  setTimeout(() => {
    currentIndex = (currentIndex + 1) % items.length;
    element.textContent = items[currentIndex];
    element.style.opacity = 1;
  }, 500); // 淡出时间为 0.5 秒
}

setInterval(switchWithFade, 3000);

对应的 CSS 样式：

js实现3秒一切换

#switch-content {
  transition: opacity 0.5s ease-in-out;
}

使用 Promise 和异步函数实现

通过 async/await 和 Promise 实现更可控的切换逻辑：

const items = ['内容1', '内容2', '内容3'];
const element = document.getElementById('switch-content');

async function cycleItems() {
  let currentIndex = 0;
  while (true) {
    element.textContent = items[currentIndex];
    currentIndex = (currentIndex + 1) % items.length;
    await new Promise(resolve => setTimeout(resolve, 3000));
  }
}

cycleItems();

动态加载内容切换

如果需要从服务器动态加载内容，可以使用 fetch 实现：

const urls = ['/api/item1', '/api/item2', '/api/item3'];
const element = document.getElementById('switch-content');
let currentIndex = 0;

async function loadAndSwitch() {
  const response = await fetch(urls[currentIndex]);
  const data = await response.json();
  element.textContent = data.content;
  currentIndex = (currentIndex + 1) % urls.length;
  setTimeout(loadAndSwitch, 3000);
}

loadAndSwitch();

以上方法可以根据实际需求选择或组合使用，实现灵活的定时切换功能。

标签: js