jquery插件owl.carousel.js实现时间轴切换效果的发展历程
owl carousel是款响应式的轮播图插件，功能完善，参数丰富，使用该插件可以实现各种轮播切换效果，比如时间轴型的公司发展历程。效果如下：
下面代码基于jquery-3.3.1和Owl Carousel v2.3.4版本实现，插件文件可以在GitHub下载。
Github主页：https://github.com/OwlCarousel2/OwlCarousel2
1、引入插件文件：
<link rel="stylesheet" type="text/css" href="owl.carousel.min.css" media="screen"/> <script src="jquery-3.3.1.min.js"></script> <script src="owl.carousel.min.js"></script>
2、HTML代码：
<div class="history"> <div class="yearBox"> <div id="yearBox" class="owl-carousel"> <div class="item"> <div class="year"> 1947 </div> <div class="dot"> <i></i> </div> </div> <div class="item"> <div class="year"> 1959 </div> <div class="dot"> <i></i> </div> </div> <div class="item"> <div class="year"> 1965 </div> <div class="dot"> <i></i> </div> </div> <div class="item"> <div class="year"> 1972 </div> <div class="dot"> <i></i> </div> </div> <div class="item"> <div class="year"> 1974 </div> <div class="dot"> <i></i> </div> </div> </div> </div> <div class="yearInfo"> <div class="box"> <h3>无版权限制图库图片素材</h3> <div class="info"> <div class="pic"> <img src="images/history_01.jpg" alt="无版权限制图库图片素材"/> </div> <div class="text"> <h4>Pixabay</h4> <p>Pixabay提供可在任何地方使用的免费图片和视频，所有的图像和视频Pixabay释放自由版权下创作共用CC0。你可以下载、修改、分发，并使用它们在任何你喜欢的任何东西，超过 900000 高质量照片、 插图和矢量图形。可免费用于商业用途，没有所需的归属。 </p> </div> </div> </div> <div class="box"> <h3>无版权限制图库图片素材</h3> <div class="info"> <div class="pic"> <img src="images/history_01.jpg" alt="无版权限制图库图片素材"/> </div> <div class="text"> <h4>Pixabay</h4> <p>Pixabay提供可在任何地方使用的免费图片和视频，所有的图像和视频Pixabay释放自由版权下创作共用CC0。你可以下载、修改、分发，并使用它们在任何你喜欢的任何东西，超过 900000 高质量照片、 插图和矢量图形。可免费用于商业用途，没有所需的归属。 </p> </div> </div> </div> <div class="box"> <h3>无版权限制图库图片素材</h3> <div class="info"> <div class="pic"> <img src="images/history_01.jpg" alt="无版权限制图库图片素材"/> </div> <div class="text"> <h4>Pixabay</h4> <p>Pixabay提供可在任何地方使用的免费图片和视频，所有的图像和视频Pixabay释放自由版权下创作共用CC0。你可以下载、修改、分发，并使用它们在任何你喜欢的任何东西，超过 900000 高质量照片、 插图和矢量图形。可免费用于商业用途，没有所需的归属。 </p> </div> </div> </div> <div class="box"> <h3>无版权限制图库图片素材</h3> <div class="info"> <div class="pic"> <img src="images/history_01.jpg" alt="无版权限制图库图片素材"/> </div> <div class="text"> <h4>Pixabay</h4> <p>Pixabay提供可在任何地方使用的免费图片和视频，所有的图像和视频Pixabay释放自由版权下创作共用CC0。你可以下载、修改、分发，并使用它们在任何你喜欢的任何东西，超过 900000 高质量照片、 插图和矢量图形。可免费用于商业用途，没有所需的归属。 </p> </div> </div> </div> <div class="box"> <h3>无版权限制图库图片素材</h3> <div class="info"> <div class="pic"> <img src="images/history_01.jpg" alt="无版权限制图库图片素材"/> </div> <div class="text"> <h4>Pixabay</h4> <p>Pixabay提供可在任何地方使用的免费图片和视频，所有的图像和视频Pixabay释放自由版权下创作共用CC0。你可以下载、修改、分发，并使用它们在任何你喜欢的任何东西，超过 900000 高质量照片、 插图和矢量图形。可免费用于商业用途，没有所需的归属。 </p> </div> </div> </div> </div> </div>
3、CSS代码：
/*by neirong.org*/
.yearBox {padding:0 19px;position:relative;margin-bottom:4.91%;}
.yearBox .item {text-align:center;padding-bottom:5px;position:relative;cursor:pointer;}
.yearBox .item:after {width:1px;height:26px;background-color:#e3e3e3;content:'';display:block;position:absolute;right:0;bottom:10px;}
.yearBox .no .item:after {display:none;}
.yearBox .year {font-size:24px;color:#999;line-height:1.5em;margin-bottom:24px;transition:all .3s;}
.yearBox .dot {position:relative;}
.yearBox .dot:before {width:100%;height:1px;background-color:#e3e3e3;content:'';display:block;position:absolute;left:0;bottom:4.5px;}
.yearBox .dot:after {width:1px;height:19px;background-color:#e3e3e3;content:'';display:block;position:absolute;left:50%;top:50%;margin:-9.5px 0 0 -0.5px;}
.yearBox .dot i {display:block;width:9px;height:10px;background-color:#bfbfbf;margin:0 auto;position:relative;z-index:1;transition:all .3s;}
.yearBox .cur .year {color:#e5004f;transform:scale(1.4);}
.yearBox .cur .dot i {background-color:#e5004f;}
.yearBox .owl-carousel {position:static;}
.yearBox .owl-carousel .owl-stage-outer {padding-bottom:20px;}
.yearBox .owl-carousel .owl-nav.disabled {display:block;}
.yearBox .owl-nav {font-size:0;}
.yearBox .owl-nav button {display:block;position:absolute;text-indent:-99999em;top:50%;transform:translateY(-5%);}
.yearBox .owl-nav span {display:block;width:19px;height:37px;background:no-repeat 0 0;background-size:100% auto;}
.yearBox .owl-nav span:hover {background-position:0 100%;}
.yearBox .owl-nav .owl-prev {left:0;}
.yearBox .owl-nav .owl-prev span {background-image:url(images/icon_07.png);}
.yearBox .owl-nav .owl-next {right:0;}
.yearBox .owl-nav .owl-next span {background-image:url(images/icon_08.png);}
.yearInfo .box {display:none;}
.yearInfo .box:nth-child(3) {display:block;}
.yearInfo h3 {text-align:center;position:relative;font-size:32px;line-height:1.5em;color:#3c3c3c;font-weight:normal;margin-bottom:4.91%;}
.yearInfo h3:after {width:70px;height:4px;background-color:#e5004f;margin:1.786% auto 0;content:'';display:block;}
.yearInfo .info {display:table;table-layout:fixed;width:100%;}
.yearInfo .pic {display:table-cell;vertical-align:middle;width:53.572%;}
.yearInfo .pic img {display:block;width:100%;height:auto;}
.yearInfo .text {display:table-cell;vertical-align:middle;padding-left:5.35%;font-size:16px;color:#666;line-height:1.75em;}
.yearInfo .text h4 {font-size:24px;color:#3c3c3c;line-height:1.5em;font-weight:normal;margin-bottom:5.652%;}
4、jQuery代码：
//by neirong.org
function yearinfo(e){
$('.yearInfo .box').eq(e).addClass('cur').stop().fadeIn('fast').siblings().hide().removeClass('cur');
}
function yearcur(obj,e,e2){
if($('body').width() > 768){
obj.find('.active').eq(e).addClass('cur').siblings().removeClass('cur');
yearinfo(e);
}else{
obj.find('.active').eq(e2).addClass('cur').siblings().removeClass('cur');
yearinfo(e2);
}
}
$(function(){
var _yearbox = $('#yearBox');
_yearbox.on('initialize.owl.carousel initialized.owl.carousel', function(e) {
$(this).find('.item').click(function(){
var _index = $(this).parent().index();
$(this).parent().addClass('cur').siblings().removeClass('cur');
yearinfo(_index);
});
$(this).find('.active').eq(2).trigger('click');
yearcur($(this),2,1)
});
_yearbox.on('resized.owl.carousel resize.owl.carousel', function(e) {
yearcur($(this),2,1)
});
_yearbox.on('initialize.owl.carousel initialized.owl.carousel'+
'translate.owl.carousel translated.owl.carousel ', function(e) {
_yearbox.find('.active').last().addClass('no').siblings().removeClass('no');
});
_yearbox.owlCarousel({
items:5,
loop:false,
mouseDrag:false,
autoplay:false,
nav:true,
dots:false,
touchDrag:false,
responsiveClass:true,
responsive:{
0:{
items:2,
},
769:{
items:5,
}
}
});
$('.yearBox button').click(function(){
var _eq = $('.yearBox .cur').index();
if($(this).hasClass('owl-next')){
$('.yearBox .cur').next().addClass('cur').siblings().removeClass('cur');
yearinfo(_eq + 1);
}else{
$('.yearBox .cur').prev().addClass('cur').siblings().removeClass('cur');
if(_eq != '0'){
yearinfo(_eq - 1);
}
}
});
});