jquery实现的缩略图预览滑块实例

下面我将详细讲解如何使用 jQuery 实现缩略图预览滑块的效果：

前置准备

在开始实现缩略图预览滑块之前，需要先引入 jQuery 库，可以通过以下方式进行引入：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

HTML 结构

缩略图预览滑块的 HTML 结构需要包含一个大图容器和一个缩略图容器。具体结构如下：

<div class="slider-container">
  <div class="slider-large-img">
    <!-- 大图容器 -->
    <img src="large-image.jpg" alt="">
  </div>
  <div class="slider-thumb">
    <!-- 缩略图容器 -->
    <ul>
      <li><img src="thumb1.jpg" alt=""></li>
      <li><img src="thumb2.jpg" alt=""></li>
      <li><img src="thumb3.jpg" alt=""></li>
      <li><img src="thumb4.jpg" alt=""></li>
    </ul>
  </div>
</div>

CSS 样式

需要对大图容器和缩略图容器进行样式设置，使其水平排列，具体 CSS 代码如下：

.slider-container {
  display: flex;
}

.slider-large-img,
.slider-thumb {
  flex: 1;
}

.slider-thumb {
  overflow-x: auto;
  white-space: nowrap;
}

.slider-thumb ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.slider-thumb li {
  margin: 0 5px;
}

.slider-thumb img {
  display: block;
  width: 100px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
}

.slider-large-img img {
  width: 100%;
  height: auto;
}

JavaScript 实现

步骤一：点击缩略图切换大图

在缩略图容器中的图片被点击时，应该获取到该图片对应的大图路径，并将大图容器中的图片的 src 属性设置为该路径，实现大图的切换。代码如下：

var thumbs = $('.slider-thumb img'); // 获取所有缩略图图片

thumbs.on('click', function() {
  var src = $(this).attr('src'); // 获取点击图片的路径
  $('.slider-large-img img').attr('src', src); // 设置大图路径
});

步骤二：缩略图容器添加滑动条

如果缩略图容器中的图片数量很多，而容器又不够大，就需要添加滑动条，让用户可以滑动查看所有的缩略图。这里可以使用 jQuery 的 scrollLeft 方法实现。

首先，需要在 CSS 中将缩略图容器的 overflow-x 属性设置为 auto，以使得它具有滚动条。

.slider-thumb {
  overflow-x: auto;
}

然后，在上面缩略图点击事件的回调函数中加入如下代码，计算出当前选中的缩略图在容器中的位置，然后将容器的 scrollLeft 属性设置为该位置，以使其自动滚动：

var thumbIndex = thumbs.index(this); // 获取当前点击缩略图的索引
var thumbWidth = thumbs.outerWidth(true); // 获取每个缩略图的宽度（包括 margin）
var thumbMarginLeft = parseInt(thumbs.eq(thumbIndex).css('marginLeft')); // 获取当前点击的缩略图的 marginLeft 值

// 计算出当前点击缩略图在容器中的位置
var thumbPos = thumbIndex * (thumbWidth + thumbMarginLeft); 

$('.slider-thumb').animate({
  'scrollLeft': thumbPos // 滚动到当前点击缩略图的位置
}, 300);

示例说明

示例一：使用 fadeIn 和 fadeOut 动画效果

在切换大图时，可以使用 jQuery 提供的 fadeIn 和 fadeOut 动画效果，使切换更加平滑。具体代码如下：

thumbs.on('click', function() {
  var $largeImg = $('.slider-large-img img');
  var src = $(this).attr('src');

  $largeImg.fadeOut(200, function() { // 淡出效果
    $largeImg.attr('src', src).fadeIn(200); // 淡入效果
  });
});

示例二：添加懒加载功能

如果缩略图数量很多，加载所有的缩略图可能会导致页面加载速度缓慢，这时候可以使用懒加载技术，只加载当前显示范围内的缩略图。

具体实现方法是，在页面加载完成时，初始化所有的缩略图都使用一个占位图片，等到用户将缩略图容器滚动到该图片之前时，再将该图片替换成真实的缩略图。具体代码如下：

var placeholder = 'https://via.placeholder.com/120x90'; // 占位图片地址

// 初始化所有缩略图都使用占位图片
thumbs.attr('src', placeholder);

$('.slider-thumb').scroll(function() { // 监听滚动事件
  var scrollPos = $(this).scrollLeft(); // 获取当前缩略图容器滚动的位置

  thumbs.each(function() { // 遍历所有的缩略图
    var $this = $(this);
    var imgPos = $this.offset().left; // 获取当前缩略图的位置
    var imgWidth = $this.outerWidth(true); // 获取当前缩略图的宽度（包括 margin）

    if (imgPos < scrollPos + imgWidth && $this.attr('src') === placeholder) { // 判断当前缩略图是否需要加载
      $this.attr('src', $this.data('src')); // 将占位图片替换成真实的缩略图
    }
  });
});

// 将所有缩略图的真实路径保存在 data-src 属性中
thumbs.each(function() {
  var $this = $(this);
  $this.data('src', $this.attr('src'));
  $this.attr('src', placeholder);
});

上述代码使用 jQuery 的 offset 方法获取了每个缩略图在页面中的位置，然后通过计算得出当前容器显示范围内的所有缩略图，将对应的占位图片替换为真实的缩略图。同时，在将所有的缩略图都使用占位图片初始化时，使用了 jQuery 的 data 方法将缩略图的真实路径保存在了 data-src 属性中。