在前端开发中，时间轴展示是一个常见的需求。我们经常需要通过滑动切换等方式展示不同时间点的信息。今天，我将介绍如何使用jquery和swiper插件实现时间轴tab滑动切换显示效果。
1. 准备工作
在开始实现之前，需要引入以下资源：
- jQuery库
- Swiper插件库
可以在HTML文件的head部分引入以上资源，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery+Swiper实现时间轴tab滑动切换显示效果</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/swiper@4.5.0/dist/css/swiper.min.css">
</head>
<body>
...
<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/swiper@4.5.0/dist/js/swiper.min.js"></script>
</body>
</html>
2. 实现时间轴切换效果
前置工作完成后，可以开始实现时间轴切换效果。主要包含以下几个步骤：
- HTML结构
- CSS样式
- JavaScript代码
2.1 HTML结构
时间轴展示通常是基于列表结构实现的，每一项都是这个列表中的一个li元素，代码结构如下：
<ul class="timeline">
<li class="active"><a href="#">2019</a></li>
<li><a href="#">2018</a></li>
<li><a href="#">2017</a></li>
...
</ul>
在这个列表中，每个li元素包含一个a元素，可以通过鼠标点击来切换时间轴的当前项。这个元素可以自定义样式，比如设置背景色等。
2.2 CSS样式
为了让时间轴在页面中展示出美观的效果，我们需要针对列表元素进行样式设置。具体的代码如下：
.timeline {
list-style: none;
overflow: hidden;
background-color: white;
margin: 0 auto;
padding: 0 20px;
position: relative;
max-width: 1200px;
}
.timeline:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
background-color: #ccc;
transform: translateX(-50%);
}
.timeline li {
position: relative;
width: 50%;
padding: 50px 0;
line-height: 1.4;
}
.timeline li::before {
content: "";
position: absolute;
top: 24px;
right: -6px;
width: 12px;
height: 12px;
background-color: #ccc;
border-radius: 50%;
z-index: 1;
}
.timeline li::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 25px;
height: 25px;
border: 3px solid #ccc;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 0 0 3px #ccc;
z-index: 1;
}
这段代码会给每个列表元素设置线的样式、球的样式等。
2.3 JavaScript代码
为了实现时间轴切换效果，我们需要使用Swiper插件。Swiper是一个专门用于制作轮播图的插件库，但其实也可以用来实现时间轴等其他功能。
具体的代码实现如下：
$(document).ready(function() {
var timelineSwiper = new Swiper('.timeline .swiper-container', {
direction: 'vertical',
loop: false,
speed: 1600,
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function() {
swiperAnimateCache(this);
swiperAnimate(this);
},
slideChangeTransitionEnd: function() {
swiperAnimate(this);
}
}
});
$('.swiper-container').hover(function() {
timelineSwiper.autoplay.stop();
}, function() {
timelineSwiper.autoplay.start();
});
});
这段代码会通过new Swiper()方法创建一个Swiper实例，用来实现时间轴的滑动效果。需要注意的是，这个Swiper实例的container属性值应该设置为包含列表元素的父元素，同时还需要在HTML文件中添加Swiper组件相关的HTML代码，具体的HTML代码可以参考Swiper API文档。
3. 总结
通过上面的步骤，您现在已经可以实现时间轴tab滑动切换显示效果了。当然，这只是一个实现方法，您也可以自己设计更加适合自己项目需求的时间轴效果。如果您对Swiper插件不是很熟悉，建议先阅读Swiper官方文档，深入掌握Swiper的使用方法。