jQuery波浪滚动时间轴特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

32 127 43



特效描述:波浪滚动 时间轴。jQuery基于swiper.js制作企业发展历程水平时间轴,带波浪背景的水平时间轴滚动特效。

代码结构

1. 引入CSS

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

2. 引入JS

<script src="statics/js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>

3. HTML代码

		<div class="about-main2" style="background-image: url(statics/images/lc_bg.png);">
			<div class="licheng-bg">
				<img src="statics/images/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>根据中国证监会证监许可(2011)536号《关于核准吉林金昌期货有限公司变更注册资本和股权的批复》,公司注册资本增加至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>根据吉林证监会吉林监管局文件【吉林监许字(2013)1号】,公司获得投资咨询业务资格。</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>根据中国证监会上海监管局文件沪证监期货字(2013)189号《关于核准中融汇信期货有限公司变更住址的批复》,公司迁址上海市;注册资本增加至6亿元人民币;取得资本管理业务资格【证监许可(2014)1085号】</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>
								</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 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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到