jQuery 轮播图 一个大图 下面显示五张缩略图 共8张图

以下是一个基本的jQuery轮播图示例，包括一个大图和五张缩略图：

HTML代码：

<div class="slider-wrapper">
  <div class="slider">
    <div class="slide"><img src="image1.jpg"></div>
    <div class="slide"><img src="image2.jpg"></div>
    <div class="slide"><img src="image3.jpg"></div>
    <div class="slide"><img src="image4.jpg"></div>
    <div class="slide"><img src="image5.jpg"></div>
    <div class="slide"><img src="image6.jpg"></div>
    <div class="slide"><img src="image7.jpg"></div>
    <div class="slide"><img src="image8.jpg"></div>
  </div>
  <div class="thumbnail-wrapper">
    <div class="thumbnail"><img src="image1.jpg"></div>
    <div class="thumbnail"><img src="image2.jpg"></div>
    <div class="thumbnail"><img src="image3.jpg"></div>
    <div class="thumbnail"><img src="image4.jpg"></div>
    <div class="thumbnail"><img src="image5.jpg"></div>
  </div>
</div>

CSS代码：

.slider-wrapper {
  position: relative;
  width: 800px;
  height: 500px;
}
.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 500px;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 500px;
  display: none;
}
.slide:first-child {
  display: block;
}
.thumbnail-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 800px;
  height: 100px;
  background-color: #ccc;
}
.thumbnail {
  float: left;
  width: 20%;
  height: 100px;
  cursor: pointer;
}
.thumbnail img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}

jQuery代码：

$(document).ready(function() {
  var slider = $(".slider");
  var slides = slider.find(".slide");
  var thumbnails = $(".thumbnail-wrapper").find(".thumbnail");
  var currentSlide = 0;
  var autoPlay = true;
  var autoPlayInterval = 5000;

  function showSlide(index) {
    if (index >= slides.length) {
      index = 0;
    } else if (index < 0) {
      index = slides.length - 1;
    }
    slides.hide();
    slides.eq(index).fadeIn();
    thumbnails.removeClass("active");
    thumbnails.eq(index).addClass("active");
    currentSlide = index;
  }

  function autoPlaySlides() {
    if (autoPlay) {
      showSlide(currentSlide + 1);
    }
  }

  thumbnails.click(function() {
    var index = $(this).index();
    showSlide(index);
    autoPlay = false;
  });

  $(".prev-btn").click(function() {
    showSlide(currentSlide - 1);
    autoPlay = false;
  });

  $(".next-btn").click(function() {
    showSlide(currentSlide + 1);
    autoPlay = false;
  });

  setInterval(autoPlaySlides, autoPlayInterval);
});

说明：

1. HTML代码中，轮播图的大图和缩略图都放在一个包装器（`slider-wrapper`）中，大图使用`slider`类，缩略图使用`thumbnail-wrapper`类。
2. CSS代码中，大图和缩略图都使用绝对定位进行布局，大图中每个图片都使用`slide`类，其中第一张图片默认显示，缩略图中每个图片都使用`thumbnail`类，使用`float`进行布局。
3. jQuery代码中，使用`showSlide`函数显示指定的图片，该函数接受一个参数，即要显示的图片的索引，如果索引超出了图片的范围，会自动循环。
4. 缩略图的点击事件会调用`showSlide`函数，并将`autoPlay`变量设置为`false`，停止自动播放。
5. 上一张和下一张按钮的点击事件同样会调用`showSlide`函数，并将`autoPlay`变量设置为`false`，停止自动播放。
6. 使用`setInterval`函数每隔一段时间自动播放轮播图，调用`autoPlaySlides`函数，该函数会判断`autoPlay`变量是否为`true`，如果是则自动播放下一张图片。