jQuery轮播图10张图 带预览小图 通过URL访问指定图片

以下是一个基于jQuery的轮播图，包含10张图片和预览小图，并且可以通过URL访问指定图片。

HTML代码：

<div class="slider">
  <div class="slider-main">
    <img src="https://picsum.photos/id/1/800/400" alt="Image 1">
    <img src="https://picsum.photos/id/2/800/400" alt="Image 2">
    <img src="https://picsum.photos/id/3/800/400" alt="Image 3">
    <img src="https://picsum.photos/id/4/800/400" alt="Image 4">
    <img src="https://picsum.photos/id/5/800/400" alt="Image 5">
    <img src="https://picsum.photos/id/6/800/400" alt="Image 6">
    <img src="https://picsum.photos/id/7/800/400" alt="Image 7">
    <img src="https://picsum.photos/id/8/800/400" alt="Image 8">
    <img src="https://picsum.photos/id/9/800/400" alt="Image 9">
    <img src="https://picsum.photos/id/10/800/400" alt="Image 10">
  </div>
  <div class="slider-preview">
    <img src="https://picsum.photos/id/1/100/50" alt="Image 1">
    <img src="https://picsum.photos/id/2/100/50" alt="Image 2">
    <img src="https://picsum.photos/id/3/100/50" alt="Image 3">
    <img src="https://picsum.photos/id/4/100/50" alt="Image 4">
    <img src="https://picsum.photos/id/5/100/50" alt="Image 5">
    <img src="https://picsum.photos/id/6/100/50" alt="Image 6">
    <img src="https://picsum.photos/id/7/100/50" alt="Image 7">
    <img src="https://picsum.photos/id/8/100/50" alt="Image 8">
    <img src="https://picsum.photos/id/9/100/50" alt="Image 9">
    <img src="https://picsum.photos/id/10/100/50" alt="Image 10">
  </div>
</div>

CSS代码：

.slider {
  position: relative;
  width: 800px;
  height: 400px;
  margin: 0 auto;
}
.slider-main {
  position: relative;
  width: 8000px;
}
.slider-main img {
  float: left;
  width: 800px;
  height: 400px;
}
.slider-preview {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 800px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
}
.slider-preview img {
  float: left;
  margin: 0 5px;
  width: 100px;
  height: 50px;
  opacity: 0.6;
  cursor: pointer;
}
.slider-preview img:hover {
  opacity: 1;
}

jQuery代码：

$(function() {
  var $sliderMain = $('.slider-main');
  var $sliderPreview = $('.slider-preview');
  var $images = $sliderMain.find('img');
  var $previews = $sliderPreview.find('img');
  var currentIndex = 0;

  // 显示指定图片
  function showImage(index) {
    $images.eq(index).fadeIn().siblings().fadeOut();
    $previews.eq(index).css('opacity', 1).siblings().css('opacity', 0.6);
    currentIndex = index;
  }

  // 初始化
  showImage(0);

  // 点击预览图切换图片
  $previews.click(function() {
    var index = $previews.index(this);
    showImage(index);
  });

  // 通过URL访问指定图片
  var urlParams = new URLSearchParams(window.location.search);
  var imageIndex = parseInt(urlParams.get('image'));
  if (!isNaN(imageIndex) && imageIndex >= 1 && imageIndex <= $images.length) {
    showImage(imageIndex - 1);
  }

  // 自动轮播
  setInterval(function() {
    var nextIndex = (currentIndex + 1) % $images.length;
    showImage(nextIndex);
  }, 3000);
});

使用方法：

1. 将以上HTML、CSS和jQuery代码复制到你的网页中，并确保jQuery库已经引入。
2. 在`<img>`标签的`src`属性中修改图片的URL。
3. 访问网页时，可以在URL中添加`?image=1`至`?image=10`的参数，例如`http://example.com/slider.html?image=3`，表示直接显示第3张图片。