项目设计图:
项目实现效果:
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;属性,所以左右按钮需要放在其外面,保证左右按钮可显示