<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/about.css">
<link rel="stylesheet" href="css/swiper-bundle.min.css">
<style>
</style>
<title>时间轴切换效果</title>
</head>
<body>
<div class="swiper-container box">
<div class="swiper-wrapper main-timeline">
<div class="swiper-slide timeline fd-active-line">
<a href="javascript:void(0);" class="timeline-content">
<div class="timeline-year">
<span>2019</span>
</div>
</a>
<div class="xians"></div>
</div>
<div class="swiper-slide timeline">
<a href="javascript:void(0);" class="timeline-content">
<div class="timeline-year">
<span>2018</span>
</div>
</a>
<div class="xians"></div>
</div>
<div class="swiper-slide timeline">
<a href="javascript:void(0);" class="timeline-content">
<div class="timeline-year">
<span>2017</span>
</div>
</a>
<div class="xians"></div>
</div>
<div class="swiper-slide timeline">
<a href="javascript:void(0);" class="timeline-content">
<div class="timeline-year">
<span>2016</span>
</div>
</a>
<div class="xians"></div>
</div>
<div class="swiper-slide timeline">
<a href="javascript:void(0);" class="timeline-content">
<div class="timeline-year">
<span>2015</span>
</div>
</a>
<div class="xians"></div>
</div>
<div class="swiper-slide timeline">
<a href="javascript:void(0);" class="timeline-content">
<div class="timeline-year">
<span>2014</span>
</div>
</a>
<div class="xians"></div>
</div>
</div>
</div>
<ul class="event_list">
<div>
<h3 id="2012">2019</h3>
</div>
<div style="display: none;">
<h3 id="2012">2018</h3>
</div>
<div style="display: none;">
<h3 id="2011">2017</h3>
</div>
<div style="display: none;">
<h3 id="2011">2016</h3>
</div>
<div style="display: none;">
<h3 id="2011">2015</h3>
</div>
<div style="display: none;">
<h3 id="2011">2014</h3>
</div>
</ul>
</div>
<script src="js/jquery.min_v1.0.js" type="text/javascript"></script>
<script src="js/swiper-bundle.min.js" type="text/javascript"></script>
<script>
$(function () {
$(".main-timeline .timeline").click(function () {
var TAG = $(this).siblings().length;
if (TAG >= 1) {
var index = $(this).index()
$(this).addClass('fd-active-line').siblings().removeClass('fd-active-line')
$(this).parent().parent().siblings('.event_list').children().eq(index).show().siblings().hide()
}
})
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
direction: 'vertical',
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
resize: function () {
swiper.changeDirection(getDirection());
}
}
});
});
</script>
</body>
</html>
时间线tab切换页 jquery-time
需积分: 0 36 浏览量
2023-09-01
16:30:33
上传
评论
收藏 80KB ZIP 举报
jquery-time时间线tab切换页（带swiper滑动效果）.zip （6个子文件） 
jquery-time升级（带swiper滑动效果） js 
jquery.min_v1.0.js 92KB jquery.SuperSlide.2.1.3.js 12KB swiper-bundle.min.js 143KB img css swiper-bundle.min.css 14KB about.css 6KB
index.html 3KB资源评论
