2、使用setInterval函数实现一个轮播图

以下是使用`setInterval`函数实现轮播图的示例代码：

// 初始化数据
const data = [
  {
    imgUrl: 'https://example.com/image1.jpg',
    title: 'Image 1',
    bgColor: '#f00'
  },
  {
    imgUrl: 'https://example.com/image2.jpg',
    title: 'Image 2',
    bgColor: '#0f0'
  },
  {
    imgUrl: 'https://example.com/image3.jpg',
    title: 'Image 3',
    bgColor: '#00f'
  }
];

// 获取元素
const imgEl = document.querySelector('.carousel-img');
const titleEl = document.querySelector('.carousel-title');
const dotsEl = document.querySelector('.carousel-dots');

// 初始化状态
let currentIndex = 0;
render();

// 设置定时器
setInterval(() => {
  currentIndex = (currentIndex + 1) % data.length;
  render();
}, 3000);

// 渲染函数
function render() {
  const { imgUrl, title, bgColor } = data[currentIndex];
  imgEl.src = imgUrl;
  titleEl.textContent = title;
  dotsEl.innerHTML = data.map((_, index) => {
    const active = index === currentIndex ? 'active' : '';
    return `<span class="dot ${active}"></span>`;
  }).join('');
}

该示例中，我们首先定义了一个包含轮播图信息的数组`data`，然后使用`querySelector`方法获取轮播图中的元素。接着，我们初始化了当前轮播图的索引`currentIndex`，并定义了一个`render`函数用于渲染轮播图。最后，我们使用`setInterval`函数设置了一个定时器，每隔3秒钟就会更新当前轮播图的索引并重新渲染轮播图。