jQuery轮播图6张图 带切换按钮 带预览小图 小图只显示前后4张

以下是一个简单的jQuery轮播图代码，其中包括6张图片、切换按钮和预览小图。预览小图只显示前后4张图片。

HTML代码：

<div class="slideshow">
  <div class="slides">
    <img src="img/1.jpg">
    <img src="img/2.jpg">
    <img src="img/3.jpg">
    <img src="img/4.jpg">
    <img src="img/5.jpg">
    <img src="img/6.jpg">
  </div>
  <div class="controls">
    <div class="prev"><</div>
    <div class="next">></div>
  </div>
  <div class="thumbnails">
    <div class="thumb-prev"><</div>
    <div class="thumb-next">></div>
    <ul>
      <li><img src="img/1.jpg"></li>
      <li><img src="img/2.jpg"></li>
      <li><img src="img/3.jpg"></li>
      <li><img src="img/4.jpg"></li>
      <li><img src="img/5.jpg"></li>
      <li><img src="img/6.jpg"></li>
    </ul>
  </div>
</div>

CSS代码：

.slideshow {
  position: relative;
  width: 800px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}
.slides {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slides img {
  width: 100%;
  height: 100%;
  display: none;
}
.slides img.active {
  display: block;
}
.controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}
.controls:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.prev {
  left: 0px;
}
.next {
  right: 0px;
}
.thumbnails {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.thumbnails ul {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1000%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: left 0.5s ease-in-out;
}
.thumbnails li {
  float: left;
  width: calc(100% / 6);
  height: 100%;
  overflow: hidden;
}
.thumbnails li img {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  cursor: pointer;
}
.thumbnails li img.active {
  opacity: 1;
}
.thumb-prev {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 60px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}
.thumb-prev:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.thumb-next {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 60px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}
.thumb-next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

jQuery代码：

$(document).ready(function() {
  // 初始化轮播图
  var slideIndex = 1;
  showSlide(slideIndex);

  // 切换按钮事件
  $('.prev').click(function() {
    slideIndex -= 1;
    showSlide(slideIndex);
  });
  $('.next').click(function() {
    slideIndex += 1;
    showSlide(slideIndex);
  });

  // 预览小图事件
  $('.thumbnails li img').click(function() {
    slideIndex = $(this).parent().index() + 1;
    showSlide(slideIndex);
  });
  $('.thumb-prev').click(function() {
    moveThumbnails(-1);
  });
  $('.thumb-next').click(function() {
    moveThumbnails(1);
  });

  // 轮播图显示函数
  function showSlide(n) {
    var slides = $('.slides img');
    var thumbnails = $('.thumbnails li img');
    if (n > slides.length) {
      slideIndex = 1;
    }
    if (n < 1) {
      slideIndex = slides.length;
    }
    slides.removeClass('active');
    slides.eq(slideIndex - 1).addClass('active');
    thumbnails.removeClass('active');
    thumbnails.eq(slideIndex - 1).addClass('active');
    updateThumbnails();
  }

  // 预览小图移动函数
  function moveThumbnails(n) {
    var thumbnails = $('.thumbnails ul');
    var thumbWidth = $('.thumbnails li').width();
    var thumbCount = $('.thumbnails li').length;
    var thumbVisible = Math.min(thumbCount, 8);
    var thumbOffset = thumbnails.position().left - (n * thumbWidth * thumbVisible);
    if (thumbOffset > 0) {
      thumbOffset = 0;
    }
    if (thumbOffset < -(thumbCount - thumbVisible) * thumbWidth) {
      thumbOffset = -(thumbCount - thumbVisible) * thumbWidth;
    }
    thumbnails.animate({left: thumbOffset}, 500);
  }

  // 预览小图更新函数
  function updateThumbnails() {
    var thumbnails = $('.thumbnails li img');
    var thumbCount = $('.thumbnails li').length;
    var thumbVisible = Math.min(thumbCount, 8);
    var thumbIndex = slideIndex - 1;
    thumbnails.removeClass('active');
    thumbnails.eq(thumbIndex).addClass('active');
    for (var i = 0; i < thumbCount; i++) {
      var thumb = thumbnails.eq(i);
      if (i >= thumbIndex - 4 && i <= thumbIndex + 3) {
        thumb.parent().show();
      } else {
        thumb.parent().hide();
      }
    }
  }
});