前端网页开发 轮播图怎么写

轮播图可以使用一些第三方插件来实现，比如swiper、slick等，也可以自己写代码实现。下面是一种基于原生JS的轮播图实现方式：

HTML结构：

<div class="carousel">
  <ul class="carousel-list">
    <li><img src="1.jpg"></li>
    <li><img src="2.jpg"></li>
    <li><img src="3.jpg"></li>
    <li><img src="4.jpg"></li>
    <li><img src="5.jpg"></li>
  </ul>
  <ul class="carousel-dots"></ul>
</div>

CSS样式：

.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.carousel-list {
  position: absolute;
  width: 500%;
  height: 100%;
  left: 0;
  top: 0;
}
.carousel-list li {
  float: left;
  width: 20%;
  height: 100%;
  list-style: none;
}
.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.carousel-dots li {
  float: left;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}
.carousel-dots li.active {
  background-color: #333;
}

JS代码：

var carousel = document.querySelector('.carousel');
var carouselList = carousel.querySelector('.carousel-list');
var carouselItems = carouselList.querySelectorAll('li');
var dots = carousel.querySelector('.carousel-dots');
var dotItems = [];

var currentItemIndex = 0;
var timer = null;

// 初始化轮播图
function initCarousel() {
  // 创建轮播图下方的小圆点
  for (var i = 0; i < carouselItems.length; i++) {
    var dotItem = document.createElement('li');
    dotItem.setAttribute('data-index', i);
    dots.appendChild(dotItem);
    dotItems.push(dotItem);
  }
  // 设置第一个小圆点为选中状态
  dotItems[currentItemIndex].classList.add('active');
  // 克隆首尾两个item，实现循环滚动
  var firstItem = carouselItems[0].cloneNode(true);
  var lastItem = carouselItems[carouselItems.length - 1].cloneNode(true);
  carouselList.insertBefore(lastItem, carouselList.firstChild);
  carouselList.appendChild(firstItem);
  // 设置轮播图容器、列表、子项的宽度
  carousel.style.width = '100%';
  carouselItems.forEach(function (item) {
    item.style.width = carousel.offsetWidth / 5 + 'px';
  });
  carouselList.style.width = carouselItems.length * 100 + '%';
  carouselList.style.left = '-100%';
}

// 切换到指定项
function switchTo(index) {
  // 如果index超出了范围，则跳转到相应的对称项
  if (index < 0) {
    index = carouselItems.length - 1;
  } else if (index >= carouselItems.length) {
    index = 0;
  }
  // 切换到对应的项
  var distance = -index * 100 - 100;
  carouselList.style.transition = 'left .5s ease-in-out';
  carouselList.style.left = distance + '%';
  // 切换小圆点选中状态
  dotItems[currentItemIndex].classList.remove('active');
  dotItems[index].classList.add('active');
  currentItemIndex = index;
}

// 自动轮播
function autoPlay() {
  timer = setInterval(function () {
    switchTo(currentItemIndex + 1);
  }, 3000);
}

// 监听小圆点的点击事件
dots.addEventListener('click', function (event) {
  var target = event.target;
  var index = target.getAttribute('data-index');
  if (index !== null) {
    switchTo(parseInt(index));
  }
});

// 监听鼠标移入、移出事件
carousel.addEventListener('mouseover', function () {
  clearInterval(timer);
});
carousel.addEventListener('mouseout', function () {
  autoPlay();
});

// 初始化轮播图并开始自动轮播
initCarousel();
autoPlay();

这段代码实现了一个基本的轮播图功能，轮播图下方有小圆点，可以点击小圆点切换到相应的项，鼠标移入停止自动轮播，鼠标移出继续自动轮播。