jQuery 轮播图 一张大图 下面显示五张小图 第三张图始终是当前图，带url访问 前后切换按钮

以下是一个简单的jQuery轮播图代码示例，其中包括一张大图和五张小图，第三张始终处于当前状态，并且具有前后切换按钮：

HTML代码：

<div class="slider">
  <div class="slider-large">
    <img src="大图.jpg" alt="大图">
  </div>
  <div class="slider-small">
    <ul>
      <li><a href="#"><img src="小图1.jpg" alt="小图1"></a></li>
      <li><a href="#"><img src="小图2.jpg" alt="小图2"></a></li>
      <li class="active"><a href="#"><img src="小图3.jpg" alt="小图3"></a></li>
      <li><a href="#"><img src="小图4.jpg" alt="小图4"></a></li>
      <li><a href="#"><img src="小图5.jpg" alt="小图5"></a></li>
    </ul>
  </div>
  <a class="prev" href="#">上一张</a>
  <a class="next" href="#">下一张</a>
</div>

CSS代码：

.slider {
  position: relative;
  width: 800px;
  height: 400px;
}
.slider-large img {
  width: 100%;
  height: 100%;
}
.slider-small {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #fff;
}
.slider-small ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.slider-small li {
  display: inline-block;
  margin: 0 10px;
}
.slider-small li.active {
  border-bottom: 2px solid #f00;
}
.slider-small img {
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
.slider-small img:hover {
  opacity: 1;
}
.prev, .next {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  font-size: 28px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  background: #000;
  opacity: 0.5;
  cursor: pointer;
}
.prev:hover, .next:hover {
  opacity: 1;
}
.prev {
  left: 0;
}
.next {
  right: 0;
}

jQuery代码：

$(function() {
  var slider = $('.slider');
  var sliderLarge = $('.slider-large');
  var sliderSmall = $('.slider-small');
  var sliderSmallList = sliderSmall.find('li');
  var prevBtn = slider.find('.prev');
  var nextBtn = slider.find('.next');
  var activeIndex = 2; // 当前小图的索引（从0开始）
  var timer = null; // 自动播放定时器

  // 切换到指定索引的小图
  function switchSmall(index) {
    sliderSmallList.removeClass('active').eq(index).addClass('active');
  }

  // 切换到指定索引的大图
  function switchLarge(index) {
    var imgSrc = sliderSmallList.eq(index).find('img').attr('src');
    sliderLarge.find('img').attr('src', imgSrc);
  }

  // 上一张按钮点击事件
  prevBtn.on('click', function(e) {
    e.preventDefault();
    activeIndex--;
    if (activeIndex < 0) {
      activeIndex = 4;
    }
    switchSmall(activeIndex);
    switchLarge(activeIndex);
    clearInterval(timer);
    autoPlay();
  });

  // 下一张按钮点击事件
  nextBtn.on('click', function(e) {
    e.preventDefault();
    activeIndex++;
    if (activeIndex > 4) {
      activeIndex = 0;
    }
    switchSmall(activeIndex);
    switchLarge(activeIndex);
    clearInterval(timer);
    autoPlay();
  });

  // 自动播放函数
  function autoPlay() {
    timer = setInterval(function() {
      activeIndex++;
      if (activeIndex > 4) {
        activeIndex = 0;
      }
      switchSmall(activeIndex);
      switchLarge(activeIndex);
    }, 3000);
  }

  // 初始化
  switchSmall(activeIndex);
  switchLarge(activeIndex);
  autoPlay();
});

说明：

1. HTML部分包括一个名为“slider”的容器，其中包括一个名为“slider-large”的容器和一个名为“slider-small”的容器，以及前后切换按钮。
2. CSS部分定义了轮播图的样式，包括大图和小图的样式，以及前后切换按钮的样式。
3. jQuery部分定义了切换小图和大图的函数，并在前后切换按钮的点击事件中调用这些函数。还定义了一个自动播放函数，并在页面加载完成后调用该函数开始自动播放。