jQuery时间轴左右切换滑动代码



77 306 103



特效描述: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.51qianduan.com/" target="_blank"><img src="images/1.jpg" width="256" height="220" /></a>
				<h1><a href="http://www.51qianduan.com/" target="_blank">贺静:建谈——绿色建筑是什么</a></h1>
				<p>本期【绿建大讲堂】由中国建筑设计标准研究院的贺静博士后担任主讲人,从更加广义的角度解析绿色建筑的真正内涵。<span style="text-indent:upline;"><a href="http://www.51qianduan.com/" target="_blank">更多>></a></span></p>
			</li>
			<li id="1月15日">
				<a href="http://www.51qianduan.com/" target="_blank"><img src="images/2.jpg" width="256" height="220" /></a>
				<h1><a href="http://www.51qianduan.com/" target="_blank">曹春莉:BREEAM in China</a></h1>
				<p>本期【绿建大讲堂】由曹春莉博士与大家分享英国绿色建筑评价标准BREEAM,以及BREEAM在中国的发展情况。<span><a href="http://www.51qianduan.com/" target="_blank">更多>></a></span></p>
			</li>
			<li id="1月20日">
				<a href="http://www.51qianduan.com/" target="_blank"><img src="images/3.jpg" width="256" height="220" /></a>
				<h1><a href="http://www.51qianduan.com/" target="_blank">郭佳鑫:绿色建筑 点睛之材——真空玻璃</a></h1>
				<p>本期【绿建大讲堂】由郭佳鑫女士与大家分享绿色建筑点睛之材——真空玻璃。内容从真空玻璃的发展历史、优势分析、应用等方面,深入分析和阐述了真空玻璃作为新型的绿色建材的广阔应用前景。<span><a href="http://www.51qianduan.com/" target="_blank">更多>></a></span></p>
			</li>
			<li id="1月27日">
				<a href="http://www.51qianduan.com/" target="_blank"><img src="images/4.jpg" width="256" height="220" /></a>
				<h1><a href="http://www.51qianduan.com/" target="_blank">武洪玲:阳光空气水——3M阳光</a></h1>
				<p>本期【绿建大讲堂】由北京英飞鸿科技有限公司节能产品事业部产品经理
武洪玲与大家分享美国3M公司的管道式日光照明系统,光导纤维照明和建筑窗贴膜产品。<span><a href="http://www.51qianduan.com/" target="_blank">更多>></a></span></p>
			</li>
			<li id="1月29日">
				<img src="images/5.jpg" width="256" height="220" />
				<h1><a href="http://www.51qianduan.com/" target="_blank">郭振兴:绿色建筑标识评价变化与发展</a></h1>
				<p>本期【绿建大讲堂】由绿建专家郭振兴担任主讲人,围绕新版《绿色建筑评价标准》gb50378-2014从以下四个方面:业务模式的变化、不断成长的标准体系、国标2014版评价内容的变化、趋势分析,开展《绿色建筑标识评价变化与发展》主题讲座。<span><a href="http://www.51qianduan.com/" target="_blank">更多>></a></span></p>
			</li>
			<li id="2月2日">
				<img src="images/6.jpg" width="256" height="220" />
				<h1><a href="http://www.51qianduan.com/" target="_blank">马庄:浅谈中国木结构建筑的发展</a></h1>
				<p>本期【绿建大讲堂】由多年从事木结构建筑工作的马庄为大家介绍中国木结构建筑的历史发展以及木结构建筑的主要结构和发展前景。<span><a href="http://www.51qianduan.com/" target="_blank">更多>></a></span></p>
			</li>
			<li id="2月4日">
				<img src="images/7.jpg" width="256" height="220" />
				<h1><a href="http://www.51qianduan.com/" target="_blank">李林蔓:绿色照明——LED的应用</a></h1>
				<p>本期【绿建大讲堂】由李林蔓总经理担任主讲人,主要就LED 的产业现状以及LED未来发展的优势展开以“绿色照明—LED的应用”为主题的专题讲座。<span><a href="http://www.51qianduan.com/" target="_blank">更多>></a></span></p>
			</li>
			<li id="2月5日">
				<img src="images/8.jpg" width="256" height="220" />
				<h1><a href="http://www.51qianduan.com/" target="_blank">殷明刚:CFD在建筑环境领域的实践与研究</a></h1>
				<p>本期【绿建大讲堂】由经验丰富的绿色建筑模拟专家殷明刚结合实际工程案例介绍CFD在建筑环境领域的应用。<span><a href="http://www.51qianduan.com/" target="_blank">更多>></a></span></p>
			</li>
			<li id="3月13日">
				<img src="images/9.jpg" width="256" height="220" />
				<h1><a href="http://www.51qianduan.com/" target="_blank">隗艳:污水处理技术</a></h1>
				<p>本期讲座由拥有多项污水处理技术专利的北京依维优环境设备制造有限公司的技术总监隗艳为大家介绍先进的污水处理技术及案例分享。<span><a href="http://www.51qianduan.com/" target="_blank">更多>></a></span></p>
			</li>
			<li id="3月17日">
				<img src="images/10.jpg" width="256" height="220" />
				<h1><a href="http://www.51qianduan.com/" target="_blank">钱纪程:物业管理和节能减排</a></h1>
				<p>本期讲座由具有多年物业管理工作经验的北京华清物业管理有限责任公司总工程师钱纪程带来“物业管理和节能减排”主题讲座,钱总工结合实际案例介绍了建筑全生命周期中物业管理的重要性以及物业管理对节能减排的影响。<span><a href="http://www.51qianduan.com/" target="_blank">更多>></a></span></p>
			</li>
			<li id="3月18日">
				<img src="images/11.jpg" width="256" height="220" />
				<h1><a href="http://www.51qianduan.com/" target="_blank">赵永青:建筑能耗模拟及应用</a></h1>
				<p>本次(建筑物理模拟讲座)由经验丰富的建筑能耗模拟专家赵永青结合实际工程案例介绍建筑能耗模拟在建筑坏境领域的应用。<span><a href="http://www.51qianduan.com/" target="_blank">更多>></a></span></p>
			</li>
			<li id="3月19日">
				<img src="images/12.jpg" width="256" height="220" />
				<h1><a href="http://www.51qianduan.com/" target="_blank">何森:室内环境质量与物联网</a></h1>
				<p>本期【绿建大讲堂】是由瑞芬德(北京)环境科技有限公司总经理何森教授担任主讲人,为大家介绍互联网时代下的室内空气质量管理——室内空气质量与物联网。<span><a href="http://www.51qianduan.com/" target="_blank">更多>></a></span></p>
			</li>
			<li id="3月26日">
				<img src="images/13.png" width="256" height="220" />
				<h1><a href="http://www.51qianduan.com/" target="_blank">于传江:汉能薄膜太阳能组件产品介绍</a></h1>
				<p>汉能是生产太阳能薄膜电池的,不同于其他厂家生产的单晶硅和多晶硅电池。
太阳能发电分为两种,第一种是光吸收热量再转化为电能,第二种是光生电即光伏效应,即利用薄膜电池和太阳能电池。<span><a href="http://www.51qianduan.com/" target="_blank">更多>></a></span></p>
			</li>
			<li id="4月1日">
				<img src="images/14.jpg" width="256" height="220" />
				<h1><a href="http://www.51qianduan.com/" target="_blank">郑立红:天津生态城在能耗模拟方面的研究和探索</a></h1>
				<p>本次【建筑物理模拟讲座】由经验丰富的建筑能耗模拟专家郑立红,介绍天津生态城在能耗标准研究、探索及取得的成绩,最后是e QUESTS本地化的一些构想。<span><a href="http://www.51qianduan.com/" 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

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