jQuery時間軸左右切換滑動代碼



81 320 107



特效描述:jQuery時間軸 左右切換滑動,jQuery時間軸左右切換滑動代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css.css">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.timelinr-0.9.4.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.timelinr-0.9.4.js" type="text/javascript"></script>

3. HTML代碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript"> 
	$(function(){
		$().timelinr({
			autoPlay: 'true',
			autoPlayDirection: 'forward',
			startAt: 3
		})
	});
</script>
</head>
<body id="introduction">
<br><br>
<div id="page">
	<div id="container" class="content clearfix">
	<div id="timeline">
		<ul id="dates">
			<li><a href="#1月13日">1月13日</a></li>
			<li><a href="#1月15日">1月15日</a></li>
			<li><a href="#1月20日">1月20日</a></li>
			<li><a href="#1月27日">1月27日</a></li>
			<li><a href="#1月29日">1月29日</a></li>
			<li><a href="#2月2日">2月2日</a></li>
			<li><a href="#2月4日">2月4日</a></li>
			<li><a href="#2月5日">2月5日</a></li>
			<li><a href="#3月13日">3月13日</a></li>
			<li><a href="#3月17日">3月17日</a></li>
			<li><a href="#3月18日">3月18日</a></li>
			<li><a href="#3月19日">3月19日</a></li>
			<li><a href="#3月26日">3月26日</a></li>
			<li><a href="#4月1日">4月1日</a></li>
		</ul>
		<ul id="issues">
			<li id="1月13日">
				<a href="http://www.cqetom.live/" target="_blank"><img src="images/1.jpg" width="256" height="220" /></a>
				<h1><a href="http://www.cqetom.live/" target="_blank">賀靜:建談——綠色建筑是什么</a></h1>
				<p>本期【綠建大講堂】由中國建筑設計標準研究院的賀靜博士后擔任主講人,從更加廣義的角度解析綠色建筑的真正內涵。<span style="text-indent:upline;"><a href="http://www.cqetom.live/" target="_blank">更多>></a></span></p>
			</li>
			<li id="1月15日">
				<a href="http://www.cqetom.live/" target="_blank"><img src="images/2.jpg" width="256" height="220" /></a>
				<h1><a href="http://www.cqetom.live/" target="_blank">曹春莉:BREEAM in China</a></h1>
				<p>本期【綠建大講堂】由曹春莉博士與大家分享英國綠色建筑評價標準BREEAM,以及BREEAM在中國的發展情況。<span><a href="http://www.cqetom.live/" target="_blank">更多>></a></span></p>
			</li>
			<li id="1月20日">
				<a href="http://www.cqetom.live/" target="_blank"><img src="images/3.jpg" width="256" height="220" /></a>
				<h1><a href="http://www.cqetom.live/" target="_blank">郭佳鑫:綠色建筑 點睛之材——真空玻璃</a></h1>
				<p>本期【綠建大講堂】由郭佳鑫女士與大家分享綠色建筑點睛之材——真空玻璃。內容從真空玻璃的發展歷史、優勢分析、應用等方面,深入分析和闡述了真空玻璃作為新型的綠色建材的廣闊應用前景。<span><a href="http://www.cqetom.live/" target="_blank">更多>></a></span></p>
			</li>
			<li id="1月27日">
				<a href="http://www.cqetom.live/" target="_blank"><img src="images/4.jpg" width="256" height="220" /></a>
				<h1><a href="http://www.cqetom.live/" target="_blank">武洪玲:陽光空氣水——3M陽光</a></h1>
				<p>本期【綠建大講堂】由北京英飛鴻科技有限公司節能產品事業部產品經理
武洪玲與大家分享美國3M公司的管道式日光照明系統,光導纖維照明和建筑窗貼膜產品。<span><a href="http://www.cqetom.live/" target="_blank">更多>></a></span></p>
			</li>
			<li id="1月29日">
				<img src="images/5.jpg" width="256" height="220" />
				<h1><a href="http://www.cqetom.live/" target="_blank">郭振興:綠色建筑標識評價變化與發展</a></h1>
				<p>本期【綠建大講堂】由綠建專家郭振興擔任主講人,圍繞新版《綠色建筑評價標準》gb50378-2014從以下四個方面:業務模式的變化、不斷成長的標準體系、國標2014版評價內容的變化、趨勢分析,開展《綠色建筑標識評價變化與發展》主題講座。<span><a href="http://www.cqetom.live/" target="_blank">更多>></a></span></p>
			</li>
			<li id="2月2日">
				<img src="images/6.jpg" width="256" height="220" />
				<h1><a href="http://www.cqetom.live/" target="_blank">馬莊:淺談中國木結構建筑的發展</a></h1>
				<p>本期【綠建大講堂】由多年從事木結構建筑工作的馬莊為大家介紹中國木結構建筑的歷史發展以及木結構建筑的主要結構和發展前景。<span><a href="http://www.cqetom.live/" target="_blank">更多>></a></span></p>
			</li>
			<li id="2月4日">
				<img src="images/7.jpg" width="256" height="220" />
				<h1><a href="http://www.cqetom.live/" target="_blank">李林蔓:綠色照明——LED的應用</a></h1>
				<p>本期【綠建大講堂】由李林蔓總經理擔任主講人,主要就LED 的產業現狀以及LED未來發展的優勢展開以“綠色照明—LED的應用”為主題的專題講座。<span><a href="http://www.cqetom.live/" target="_blank">更多>></a></span></p>
			</li>
			<li id="2月5日">
				<img src="images/8.jpg" width="256" height="220" />
				<h1><a href="http://www.cqetom.live/" target="_blank">殷明剛:CFD在建筑環境領域的實踐與研究</a></h1>
				<p>本期【綠建大講堂】由經驗豐富的綠色建筑模擬專家殷明剛結合實際工程案例介紹CFD在建筑環境領域的應用。<span><a href="http://www.cqetom.live/" target="_blank">更多>></a></span></p>
			</li>
			<li id="3月13日">
				<img src="images/9.jpg" width="256" height="220" />
				<h1><a href="http://www.cqetom.live/" target="_blank">隗艷:污水處理技術</a></h1>
				<p>本期講座由擁有多項污水處理技術專利的北京依維優環境設備制造有限公司的技術總監隗艷為大家介紹先進的污水處理技術及案例分享。<span><a href="http://www.cqetom.live/" target="_blank">更多>></a></span></p>
			</li>
			<li id="3月17日">
				<img src="images/10.jpg" width="256" height="220" />
				<h1><a href="http://www.cqetom.live/" target="_blank">錢紀程:物業管理和節能減排</a></h1>
				<p>本期講座由具有多年物業管理工作經驗的北京華清物業管理有限責任公司總工程師錢紀程帶來“物業管理和節能減排”主題講座,錢總工結合實際案例介紹了建筑全生命周期中物業管理的重要性以及物業管理對節能減排的影響。<span><a href="http://www.cqetom.live/" target="_blank">更多>></a></span></p>
			</li>
			<li id="3月18日">
				<img src="images/11.jpg" width="256" height="220" />
				<h1><a href="http://www.cqetom.live/" target="_blank">趙永青:建筑能耗模擬及應用</a></h1>
				<p>本次(建筑物理模擬講座)由經驗豐富的建筑能耗模擬專家趙永青結合實際工程案例介紹建筑能耗模擬在建筑壞境領域的應用。<span><a href="http://www.cqetom.live/" target="_blank">更多>></a></span></p>
			</li>
			<li id="3月19日">
				<img src="images/12.jpg" width="256" height="220" />
				<h1><a href="http://www.cqetom.live/" target="_blank">何森:室內環境質量與物聯網</a></h1>
				<p>本期【綠建大講堂】是由瑞芬德(北京)環境科技有限公司總經理何森教授擔任主講人,為大家介紹互聯網時代下的室內空氣質量管理——室內空氣質量與物聯網。<span><a href="http://www.cqetom.live/" target="_blank">更多>></a></span></p>
			</li>
			<li id="3月26日">
				<img src="images/13.png" width="256" height="220" />
				<h1><a href="http://www.cqetom.live/" target="_blank">于傳江:漢能薄膜太陽能組件產品介紹</a></h1>
				<p>漢能是生產太陽能薄膜電池的,不同于其他廠家生產的單晶硅和多晶硅電池。
太陽能發電分為兩種,第一種是光吸收熱量再轉化為電能,第二種是光生電即光伏效應,即利用薄膜電池和太陽能電池。<span><a href="http://www.cqetom.live/" target="_blank">更多>></a></span></p>
			</li>
			<li id="4月1日">
				<img src="images/14.jpg" width="256" height="220" />
				<h1><a href="http://www.cqetom.live/" target="_blank">鄭立紅:天津生態城在能耗模擬方面的研究和探索</a></h1>
				<p>本次【建筑物理模擬講座】由經驗豐富的建筑能耗模擬專家鄭立紅,介紹天津生態城在能耗標準研究、探索及取得的成績,最后是e QUESTS本地化的一些構想。<span><a href="http://www.cqetom.live/" target="_blank">更多>></a></span></p>
			</li>
		</ul>
		<div id="grad_left"></div>
		<div id="grad_right"></div>
	</div>
  </div> 
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 圖片放大鏡 圖片疊加 圖片層疊 圖片翻轉 圖片旋轉 圖片拖動 圖片拖拽 圖片延遲加載 圖片延遲 圖片加載 圖片淡出淡進 圖片淡出 圖片淡進 圖片全屏 頭像上傳 圖片上傳 二維碼 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 帶縮略圖的幻燈片 地圖 中國地圖 世界地圖 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 圖片廣告 滑動選項卡 滑動切換 圖片收縮展開 圖片收縮 圖片展開 純圖片輪播 圖片輪播 圖片滾動 圖片滾動條 圖片滑動 圖片滑塊 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖片切換 圖片選項卡 圖標選項卡 自動滾動圖片輪播 圖標導航 圖標菜單 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 背景切換 大圖切換 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 日期時間 時鐘 日歷 時間 日歷插件 時間日期插件 圖表 圖片 圖片插件 頭像截圖 時間軸 豎直時間軸 橫向時間軸 圖片滑動 圖片滑塊 圖片切換 圖片選項卡 圖標選項卡 文字滑動 文字滑塊 選項卡自動切換 圖片滑動 滑動圖片
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子