Swiper3实现简易的大事记展示效果

项目设计图：

项目实现效果：

1、年份从左到右依次递增，默认显示最后一年

2、每屏显示7个年份，点击左右按钮切换一个年份，点击年份也可随时切换

实现过程：

页面结构：

<div class="about3">
	<div class="about3_wrap swiper-container">
		<ul class="swiper-wrapper">
			<li class="swiper-slide">
				<h1 class="fnt_18">2011</h1>
				<em></em>
				<p class="fnt_14">XXX公司成立</p>
			</li>
		</ul>
	</div>
	<div class="about3_left"></div>
	<div class="about3_right"></div>
</div>

js实现swiper效果：

var _len = $(".about3 .swiper-slide").length;
var _ind = _len-1;
var aboutSwiper = new Swiper('.about3 .swiper-container', {
	slidesPerView: 7, //同时显示的slides数量7个
	prevButton: '.about3_left',
	nextButton: '.about3_right',
})

为了实现点击左右按钮和点击年份同时可以切换大事记内容，我们要脱离掉swiper的当前选中类名swiper-slide-active，需要自行给定on类名，然而swiper的自动滑动还是可以使用的。

首先给最后一个slide添加class->on，保证其内容正常显示，其次让swiper滑动到最后一屏，保证其位置正常显示。同时要做出判断左右按钮的点击状态。

$(".about3 .swiper-slide").eq(_ind).addClass("on");
btnJudge();
aboutSwiper.slideTo(_ind,0);

由于按钮的点击状态，在默认状态下，点击左右按钮的情况下，以及点击年份时，都会直接影响按钮的点击状态，所以将其封装在btnJudge方法内。

function btnJudge() {
	if(_ind >= _len - 1) {
		$('.about3_right').addClass("disabled")
		_ind = _len - 1;
	} else {
		$('.about3_right').removeClass("disabled")
	}
	if(_ind <= 0) {
		$(".about3_left").addClass("disabled")
		_ind = 0;
	} else {
		$(".about3_left").removeClass("disabled")
	}
}

同时通过slide下标_ind的来判断是否添加类名on。

//点击左按钮，实现_ind自减1
$(".about3_left").click(function() {
	_ind--;
	btnJudge()
	$(".about3 .swiper-slide").eq(_ind).addClass("on").siblings().removeClass("on");
})
//点击又按钮，实现_ind自加1
$('.about3_right').click(function() {
	_ind++;
	btnJudge()
	$(".about3 .swiper-slide").eq(_ind).addClass("on").siblings().removeClass("on");
})
//点击slide，获取当前下标并赋值给_ind
$(".about3 .swiper-slide").click(function() {
	$(this).addClass("on").siblings().removeClass("on");
	_ind = $(this).index();
	btnJudge()
})

注意事项：

1、由于swiper-container有overflow:hidden;属性，所以左右按钮需要放在其外面，保证左右按钮可显示