当前位置:龙哥网 > 网络技术 > jquery插件owl.carousel.js实现时间轴切换效果的发展历程

jquery插件owl.carousel.js实现时间轴切换效果的发展历程

longge5个月前 (12-17)网络技术82

owl carousel是款响应式的轮播图插件,功能完善,参数丰富,使用该插件可以实现各种轮播切换效果,比如时间轴型的公司发展历程。效果如下:

jquery插件owl.carousel.js实现时间轴切换效果的发展历程

下面代码基于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" _blank" href="https://longgewang.com/tags-1633.html"class="tagslink"style="color:#004C98">素材"/>
					</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" />
					</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" />
					</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" />
					</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" />
					</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);
			}			
		}		
	});
});
免责声明
本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。#转载请注明出处!