banner轮播图js代码

根据提供的引用[1]，以下是一个简单的基于JavaScript的轮播图代码示例：

// 获取轮播图容器和图片列表
var banner = document.getElementById('banner');
var imgList = banner.getElementsByTagName('ul')[0].getElementsByTagName('li');

// 获取小圆点容器
var circle = document.getElementById('circle');

// 定义当前显示的图片索引和定时器
var index = 0;
var timer = null;

// 定义切换图片的函数
function changeImg() {
  // 隐藏当前显示的图片
  imgList[index].style.display = 'none';
  // 切换到下一张图片
  index = (index + 1) % imgList.length;
  // 显示下一张图片
  imgList[index].style.display = 'block';
  // 切换小圆点的样式
  for (var i = 0; i < circle.children.length; i++) {
    circle.children[i].className = '';
  }
  circle.children[index].className = 'active';
}

// 定义自动切换图片的函数
function autoChange() {
  timer = setInterval(changeImg, 2000);
}

// 初始化轮播图
function initBanner() {
  // 显示第一张图片
  imgList[0].style.display = 'block';
  // 创建小圆点
  for (var i = 0; i < imgList.length; i++) {
    var span = document.createElement('span');
    if (i === 0) {
      span.className = 'active';
    }
    circle.appendChild(span);
  }
  // 自动切换图片
  autoChange();
}

// 初始化轮播图
initBanner();

该代码实现了一个简单的轮播图，包括自动切换图片和小圆点切换图片等功能。你可以根据自己的需求进行修改和扩展。