适合在企业网站展示企业发展历程的时间轴滑动特效源码

最新推荐文章于 2025-03-27 16:56:26 发布

mazai5080

最新推荐文章于 2025-03-27 16:56:26 发布

阅读量2.4k

点赞数

分类专栏：前端源码文章标签： javascript 经验分享

本文链接：https://blog.csdn.net/mazai5080/article/details/124417986

版权

前端源码专栏收录该内容

102 篇文章

订阅专栏

大家好，今天给大家介绍一款，JavaScript实现的适合在企业网站展示企业发展历程的滑动特效源码（图1）。送给大家哦，获取方式在本文末尾。

图1

可以用鼠标左右滑动查看，也可以点击左右按钮查看（图2）

图2

源码完整，需要的朋友可以下载学习（图3）

图3

本源码编码：10141，需要的朋友，关注文末公众号，搜索10141，即可获取。

部分代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>公司发展历程特效</title>

<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="stylesheet" type="text/css" href="static/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="static/css/iconfont.css">

</head>
<body>

<div class="about-main2" style="background-image: url(static/image/lc_bg.jpg);">
	<div class="licheng-bg">
		<img src="static/picture/lc-quxian.png" class="quxian">
		<div class="warper pr">
			<div class="ny-title">
				<h3 class="title-en">DEVELOPMENT</h3>
				<h4 class="title-ch">发展历程</h4>
				<i></i>
			</div>
			<div class="licheng-content swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<ul class="clearfix">
							<li class="item1">
								<a class="clearfix">
									<div class="lc-left">
										<i class="line"></i> <span class="date">1995</span>
									</div>
									<div class="lc-right">
										<div class="right-text">
											<h3>公司成立</h3>
											<p>1995年12月14日，某某某有限公司成立。</p>
										</div>
									</div>
								</a>
							</li>
							<li class="item2">
								<a class="clearfix">
									<div class="lc-left">
										<span class="date">2011</span>
										<i class="line"></i> </div>
									<div class="lc-right">
										<div class="right-text">
											<h3>公司更名</h3>
											<p>根据许可《关于核准某某某有限公司变更注册资本和股权的批复》，公司注册资本增加至2亿元，由上海某某某有限公司控股，公司名称变更为某某某有限公司。</p>
										</div>
									</div>
								</a>
							</li>
							<li class="item3">
								<a class="clearfix">
									<div class="lc-left">
										<i class="line"></i> <span class="date">2013</span>
									</div>
									<div class="lc-right">
										<div class="right-text">
											<h3>获得投资咨询业务资格</h3>
											<p>根据吉林某某某，公司获得投资咨询业务资格。</p>
										</div>
									</div>
								</a>
							</li>
							<li class="item4">
								<a class="clearfix">
									<div class="lc-left">
										<span class="date">2014</span>
										<i class="line"></i> </div>
									<div class="lc-right">
										<div class="right-text">
											<h3>公司增资，迁址，获得资管资格</h3>
											<p>根据文件某某某，公司迁址上海市；注册资本增加至6亿元人民币；取得某某某管理业务资格</p>
										</div>
									</div>
								</a>
							</li>
							<li class="item5">
								<a class="clearfix">
									<div class="lc-left">
										<i class="line"></i> <span class="date">2015</span>
									</div>
									<div class="lc-right">
										<div class="right-text">
											<h3>子公司成立</h3>
											<p>2015年1月15日，成立风险管理子公司某某某有限公司；2105年10月30日，成立上海某某某有限公司。</p>
										</div>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="swiper-slide">
						<ul class="clearfix">
							<li class="item1">
								<a class="clearfix">
									<div class="lc-left">
										<i class="line"></i> <span class="date">2017</span>
									</div>
									<div class="lc-right">
										<div class="right-text">
											<h3>成为中国某某某交易中心会员</h3>
											<p>2017年5月，公司成为上海某某某中心首批会员</p>
										</div>
									</div>
								</a>
							</li>
							<li class="item2">
								<a class="clearfix">
									<div class="lc-left">
										<span class="date" style="text-align: center">2019.05.16</span>
										<i class="line"></i> </div>
									<div class="lc-right">
										<div class="right-text">
											<h3>公司更名</h3>
											<p>根据许可《关于核准某某某有限公司变更注册资本和股权的批复》，公司注册资本增加至2亿元，由上海某某某有限公司控股，公司名称变更为某某某有限公司。</p>
										</div>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<!--按钮-->
				<div class="lc-swiper-btn">
					<a class="btn-prev fl"><i class="iconfont">&#xe624;</i></a>
					<a class="btn-next fr"><i class="iconfont">&#xe626;</i></a>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="static/js/jquery-1.10.2.js"></script>
<script src="static/js/swiper.min.js" type="text/javascript" ></script>
<script type="text/javascript">
	var mySwiper = new Swiper('.swiper-container.licheng-content', {
		autoplay: false, //自动滑动
	})
	$('.btn-prev').click(function() {
		mySwiper.swipePrev();
	})
	$('.btn-next').click(function() {
		mySwiper.swipeNext();
	})
</script>
	<a href="https://smalltool.github.io/" style="display:none;"></a>
</body>
</html>