使用jQuery编写一个轮播图，要求支持自动播放、手动切换和轮播点导航。具体实现功能描述如下:自动播放:需要使用jQuery定时器对轮播图进行自动切换。手动切换:需要监听箭头或按钮的点击事件，并根据当前显示图片的下标进行上下一张图片 的切换。轮播点导航:需要在页面下方展示轮播点导航，并根据当前显示图片的下标高亮相应轮播点。把css和javascript插入html中，给我完整代码

以下是使用jQuery编写的轮播图的完整代码：

HTML代码：

<div class="slider">
  <ul class="slides">
    <li><img src="img1.jpg"></li>
    <li><img src="img2.jpg"></li>
    <li><img src="img3.jpg"></li>
  </ul>
  <div class="nav">
    <span class="prev">Prev</span>
    <ul class="dots">
      <li class="dot active"></li>
      <li class="dot"></li>
      <li class="dot"></li>
    </ul>
    <span class="next">Next</span>
  </div>
</div>

CSS代码：

.slider {
  position: relative;
  overflow: hidden;
}
.slides {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.slides li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.slides li.active {
  opacity: 1;
}
.nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.prev,
.next {
  display: inline-block;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.dots {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.dot.active {
  background-color: #000;
}

JavaScript代码：

$(document).ready(function() {
  // 初始化
  var currentSlide = 0;
  var slider = $('.slider');
  var slides = slider.find('.slides li');
  var dots = slider.find('.dots li');
  var interval;

  // 自动播放
  function startSlider() {
    interval = setInterval(function() {
      goToSlide(currentSlide + 1);
    }, 5000);
  }

  function stopSlider() {
    clearInterval(interval);
  }

  function goToSlide(index) {
    if (index >= slides.length) {
      index = 0;
    } else if (index < 0) {
      index = slides.length - 1;
    }
    slides.removeClass('active').eq(index).addClass('active');
    dots.removeClass('active').eq(index).addClass('active');
    currentSlide = index;
  }

  // 手动切换
  slider.on('click', '.prev', function() {
    goToSlide(currentSlide - 1);
  });

  slider.on('click', '.next', function() {
    goToSlide(currentSlide + 1);
  });

  // 轮播点导航
  dots.on('click', function() {
    var index = $(this).index();
    goToSlide(index);
  });

  // 开始自动播放
  startSlider();

  // 停止自动播放
  slider.on('mouseenter', function() {
    stopSlider();
  });

  slider.on('mouseleave', function() {
    startSlider();
  });
});

注意：需要在页面中引入jQuery库。