jQuery 轮播图 共6张图 上面一张大图 下面默认显示最新3张小图，当前图居中显示，通过URL访问 带前后切换按钮

以下是一个简单的 jQuery 轮播图示例，包括6张图，上面一张大图和下面默认显示最新3张小图，当前图居中显示，并带有前后切换按钮。

HTML 代码：

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img/slide1.jpg" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="img/slide2.jpg" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="img/slide3.jpg" alt="Slide 3">
    </div>
    <div class="carousel-item">
      <img src="img/slide4.jpg" alt="Slide 4">
    </div>
    <div class="carousel-item">
      <img src="img/slide5.jpg" alt="Slide 5">
    </div>
    <div class="carousel-item">
      <img src="img/slide6.jpg" alt="Slide 6">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<div class="carousel-thumbnails">
  <div class="carousel-thumbnail active">
    <img src="img/slide1.jpg" alt="Slide 1">
  </div>
  <div class="carousel-thumbnail">
    <img src="img/slide2.jpg" alt="Slide 2">
  </div>
  <div class="carousel-thumbnail">
    <img src="img/slide3.jpg" alt="Slide 3">
  </div>
  <div class="carousel-thumbnail">
    <img src="img/slide4.jpg" alt="Slide 4">
  </div>
  <div class="carousel-thumbnail">
    <img src="img/slide5.jpg" alt="Slide 5">
  </div>
  <div class="carousel-thumbnail">
    <img src="img/slide6.jpg" alt="Slide 6">
  </div>
</div>

CSS 代码：

.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
}

.carousel-item {
  display: none;
}

.carousel-item.active {
  display: block;
}

.carousel-thumbnails {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.carousel-thumbnail {
  margin: 0 10px;
  opacity: 0.5;
  transition: opacity 0.2s ease-in-out;
}

.carousel-thumbnail:hover {
  opacity: 1;
  cursor: pointer;
}

.carousel-thumbnail.active {
  opacity: 1;
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Cpath fill=%22%23fff%22 d=%22M12.293 16.707a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 1 1 1.414 1.414L6.414 9H18a1 1 0 1 1 0 2H6.414l5.879 5.879a1 1 0 0 1 0 1.414z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: 20px 20px;
  transform: translate(0, -50%);
  opacity: 0.5;
  transition: opacity 0.2s ease-in-out;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  opacity: 1;
  cursor: pointer;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

JavaScript 代码：

$(document).ready(function() {
  // 初始化轮播图
  $('.carousel').carousel({
    interval: false // 禁止自动轮播
  });

  // 点击缩略图切换轮播图
  $('.carousel-thumbnail').click(function() {
    var index = $(this).index();
    $('.carousel-thumbnails .carousel-thumbnail').removeClass('active');
    $(this).addClass('active');
    $('.carousel .carousel-item').removeClass('active');
    $('.carousel .carousel-item').eq(index).addClass('active');
  });

  // 切换轮播图时更新缩略图
  $('.carousel').on('slide.bs.carousel', function() {
    var index = $('.carousel .carousel-item.active').index();
    $('.carousel-thumbnails .carousel-thumbnail').removeClass('active');
    $('.carousel-thumbnails .carousel-thumbnail').eq(index).addClass('active');
  });
});

在这个示例中，我们使用了 Bootstrap 的轮播图组件，它提供了一些方便的功能，如自动轮播和前后切换按钮。我们还添加了一个缩略图部分，显示最新的三张小图，并允许用户通过点击它们来切换轮播图。

在 JavaScript 代码中，我们初始化了轮播图，并添加了一个点击事件处理程序来处理缩略图的点击。我们还使用了一个轮播图事件来更新缩略图，以便它们始终反映当前显示的轮播图。