jQuery公司大事件横向时间轴代码



147 585 196



特效描述:jQuery 公司大事件 横向时间轴代码,jQuery公司大事件横向时间轴代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide2.1.2.js"></script>

3. HTML代码

<!--背景开始-->
<div class="about_bg"></div>
<!--背景结束-->
<!--发展历程开始-->
<div>
	<div class="about_content history">
		<h2>大事记</h2>
		<p class="about_txt">面包&纽扣诞生于2015年,是某某某集团旗下的全新工装品牌。</p>
	</div>
	<div class="event_box">
		<div class="space_div">
			<p class="left_space"></p>
			<p class="right_space"></p>
		</div>
		<div class="parHd clearfix">
			<ul>
				<li class="act"><span></span>2016.03.05</li>
				<li><span></span>2016.05.06</li>
				<li><span></span>2016.06.26</li>
				<li><span></span>2016.09.04</li>
				<li><span></span>2016.11.05</li>
				<li><span></span>2016.12.18</li>
				<li><span></span>2017.01.13</li>
				<li><span></span>2017.02.18</li>
			</ul>
			<a class="sPrev"><img src="images/left_ico.png" alt="" title=""></a>
			<a class="sNext"><img src="images/right_ico.png" alt="" title=""></a>
		</div>
		<div class="parBd clearfix">
			<div class="slideBox">
				<h4>所有装饰工程10年维保</h4>
				<p>成本报价为您节省30%的预算</p>
			</div>
			<div class="slideBox" style="display: none;">
				<h4>启动星店计划第一季</h4>
				<p>启动星店计划第一季</p>
			</div>
			<div class="slideBox" style="display: none;">
				<h4>星店2.0产品发布会</h4>
				<p>星店2.0产品发布会</p>
			</div>
			<div class="slideBox" style="display: none;">
				<h4>创“星”体验2016星店星评启动仪式</h4>
				<p>创“星”体验2016星店星评启动仪式。</p>
			</div>
			<div class="slideBox" style="display: none;">
				<h4>跨阅 解读从单店到连锁的商业趋势</h4>
				<p>跨阅 解读从单店到连锁的商业趋势</p>
			</div>
			<div class="slideBox" style="display: none;">
				<h4>咖啡街区发布会,助力打造精品咖啡馆</h4>
				<p>咖啡街区发布会,助力打造精品咖啡馆</p>
			</div>
			<div class="slideBox" style="display: none;">
				<h4>美团点评好店长生而不凡</h4>
				<p>美团点评好店长生而不凡</p>
			</div>
			<div class="slideBox" style="display: none;">
				<h4>第一季星店计划授星仪式</h4>
				<p>第一季星店计划授星仪式</p>
			</div>
		</div>
	</div>
</div>
<!--发展历程结束-->
<script>
	$(function() {
		jQuery(".event_box").slide({ titCell: ".parHd li", mainCell: ".parBd", defaultPlay: false, titOnClassName: "act", prevCell: ".sPrev", nextCell: ".sNext" });
		jQuery(".parHd").slide({ mainCell: " ul", vis: 6, effect: "leftLoop", defaultPlay: false, prevCell: ".sPrev", nextCell: ".sNext" });
	});
</script>



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


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 滑动选项卡 滑动切换 滚动切换 滚动条切换 自动滚动图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 渐隐切换 淡出淡进 淡出 淡进 切换按钮 日期时间 时钟 日历 时间 日历插件 时间日期插件 表单 表单美化 表单插件 表单美化插件 时间轴 竖直时间轴 横向时间轴 文字淡出淡进 文字淡出 文字淡进 文字滚动 文字无缝滚动 文字间歇滚动 文字切换 文字选项卡 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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