jQuery公司大事件橫向時間軸代碼



158 628 210



特效描述: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

加群請備注:從官網了解到

老夫子电子