<div class="header"> <div class="logo"> <!--Logo部分--> <img src="img/xiaohuilogo.jpg" alt=""> </div> <div class="banner"> <!--轮播图部分--> <img src="img/1.jpg" alt="inte1" class="slide"> <img src="img/2.jpg" alt="inte2" class="slide"> <img src="img/3.jpg" alt="inte3" class="slide"> </div> <div class="personal"> <!--个人信息部分--> </div> <!--页头部分--> </div>实现轮播图

你可以尝试使用以下的JavaScript代码和CSS样式来实现轮播图：

HTML代码：

<div class="header">
  <div class="logo">
    <img src="img/xiaohuilogo.jpg" alt="">
  </div>
  <div class="banner">
    <img src="img/1.jpg" alt="inte1" class="slide">
    <img src="img/2.jpg" alt="inte2" class="slide">
    <img src="img/3.jpg" alt="inte3" class="slide">
  </div>
  <div class="personal">
  </div>
</div>

CSS样式：

.banner {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.active {
  opacity: 1;
}

.btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  cursor: pointer;
  font-size: 30px;
  color: #fff;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

.dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  margin: 0 10px;
  cursor: pointer;
}

.dot.active {
  background-color: #f00;
}

JavaScript代码：

var slides = document.querySelectorAll('.slide');
var dots = document.querySelectorAll('.dot');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var index = 0;

function showSlide(n) {
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove('active');
  }
  slides[n].classList.add('active');
  for (var i = 0; i < dots.length; i++) {
    dots[i].classList.remove('active');
  }
  dots[n].classList.add('active');
}

function nextSlide() {
  index++;
  if (index == slides.length) {
    index = 0;
  }
  showSlide(index);
}

function prevSlide() {
  index--;
  if (index < 0) {
    index = slides.length - 1;
  }
  showSlide(index);
}

function currentSlide(n) {
  index = n;
  showSlide(index);
}

next.addEventListener('click', nextSlide);
prev.addEventListener('click', prevSlide);

for (var i = 0; i < dots.length; i++) {
  dots[i].addEventListener('click', function() {
    currentSlide(this.getAttribute('data-index'));
  });
}

showSlide(index);

var intervalId = setInterval(nextSlide, 5000);

需要注意的是，以上代码可能需要根据你的具体需求进行适当的修改。