怎样用jQuery+swiper实现鼠标滑动时间轴tab切换图片

使用 jQuery 和 Swiper 库实现鼠标滑动时间轴的 tab 切换显示不同图片效果是一个常见的交互需求。

以下是一个基本的示例代码，演示如何实现这样的效果：

引入 jQuery 和 Swiper：

确保在HTML文件中引入 jQuery 和 Swiper 库。可以从它们的官方网站下载并引入，也可以使用 CDN：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Swiper -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

HTML 结构：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- 每个时间点的图片 -->
    <div class="swiper-slide" data-year="2022">
      <img src="path/to/image2022.jpg" alt="Image 2022">
    </div>
    <div class="swiper-slide" data-year="2023">
      <img src="path/to/image2023.jpg" alt="Image 2023">
    </div>
    <!-- 更多时间点的图片... -->
  </div>
  <!-- 时间轴导航 -->
  <div class="timeline">
    <div class="timeline-item" data-year="2022"></div>
    <div class="timeline-item" data-year="2023"></div>
    <!-- 更多时间点的导航... -->
  </div>
</div>

CSS 样式：

/* 样式可根据需要自定义 */
.swiper-container {
  width: 80%;
  margin: 0 auto;
}
.timeline {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.timeline-item {
  width: 20px;
  height: 20px;
  background-color: #333;
  border-radius: 50%;
  cursor: pointer;
}
/* 更多样式... */

JavaScript 代码：

$(document).ready(function () {
  // 初始化 Swiper
  const swiper = new Swiper('.swiper-container', {
    slidesPerView: 1,
    spaceBetween: 10,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
  // 点击时间轴导航切换图片
  $('.timeline-item').on('click', function () {
    const year = $(this).data('year');
    const slideIndex = $('.swiper-slide[data-year="' + year + '"]').index();
    swiper.slideTo(slideIndex);
  });
});

在这个示例中，Swiper 被用来创建一个轮播图，每个轮播项对应一个特定年份的图片。通过点击时间轴导航，

可以切换到相应年份的图片。

你可以根据实际需求进一步自定义样式和交互效果。这里的示例假设你已经包含了 Swiper 和 jQuery 库，

需要确保图片路径正确，并根据需要调整样式和细节。