jQuery 轮播图 上下联动 通过url访问 小图就只显示5张 大图默认显示一张

以下是一个简单的 jQuery 轮播图代码示例，实现了上下联动和通过 URL 访问：

HTML 代码：

<div class="slider">
  <div class="slider-small">
    <ul>
      <li><a href="?slide=1"><img src="small-1.jpg"></a></li>
      <li><a href="?slide=2"><img src="small-2.jpg"></a></li>
      <li><a href="?slide=3"><img src="small-3.jpg"></a></li>
      <li><a href="?slide=4"><img src="small-4.jpg"></a></li>
      <li><a href="?slide=5"><img src="small-5.jpg"></a></li>
    </ul>
  </div>
  <div class="slider-large">
    <ul>
      <li><img src="large-1.jpg"></li>
      <li><img src="large-2.jpg"></li>
      <li><img src="large-3.jpg"></li>
      <li><img src="large-4.jpg"></li>
      <li><img src="large-5.jpg"></li>
    </ul>
  </div>
</div>

CSS 代码：

.slider {
  position: relative;
  height: 400px;
}
.slider-small {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  overflow: hidden;
}
.slider-small ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 500%;
}
.slider-small li {
  float: left;
  width: 20%;
}
.slider-small img {
  display: block;
  width: 100%;
  height: auto;
}
.slider-large {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  height: 320px;
  overflow: hidden;
}
.slider-large ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.slider-large li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.5s ease-in-out;
}
.slider-large li.active {
  opacity: 1;
  z-index: 1;
}
.slider-large img {
  display: block;
  width: 100%;
  height: auto;
}

jQuery 代码：

$(function() {
  var slides = $('.slider-large li');
  var current = 0;
  var interval = setInterval(nextSlide, 5000);
  $('.slider-small a').click(function(e) {
    e.preventDefault();
    current = parseInt($(this).attr('href').split('=')[1]) - 1;
    showSlide();
    clearInterval(interval);
    interval = setInterval(nextSlide, 5000);
  });
  function nextSlide() {
    current = (current + 1) % slides.length;
    showSlide();
  }
  function showSlide() {
    slides.removeClass('active');
    slides.eq(current).addClass('active');
    $('.slider-small li').removeClass('active');
    $('.slider-small li').eq(current).addClass('active');
  }
  slides.eq(0).addClass('active');
  $('.slider-small li').eq(0).addClass('active');
});

说明：

1. HTML 结构中，`.slider` 是最外层容器，包含 `.slider-small` 和 `.slider-large` 两个轮播图容器。`.slider-small` 包含小图，`.slider-large` 包含大图。
2. 小图使用了 `href="?slide=1"` 这种形式的链接，可以通过 URL 中的 `slide` 参数来切换大图。
3. CSS 中，`.slider-small` 使用了 `overflow: hidden` 让小图只显示 5 张，超出部分隐藏。
4. jQuery 中，使用了一个 `interval` 变量来保存定时器的 ID，方便后续停止和重新启动定时器。
5. 点击小图链接时，先停止定时器，然后根据链接的 `href` 属性中的 `slide` 参数来切换当前显示的大图。切换完成后重新启动定时器。
6. `nextSlide` 函数用于自动播放，每次将 `current` 变量加 1 并取余，然后调用 `showSlide` 函数显示对应的大图。
7. `showSlide` 函数首先移除所有大图和小图的 `active` 类，然后给当前大图和小图添加 `active` 类，实现切换效果。
8. 初始化时默认显示第一张大图，并给第一张小图添加 `active` 类。