利用jQuery实现图文滚动时间轴代码



38 148 50



特效描述:利用jQuery实现 图文滚动 时间轴代码,利用jQuery实现图文滚动时间轴代码

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-timeLine.js"></script>

3. HTML代码

<!--html-->
<div id="timeLine">
<ul id="yearList">
	<li class="year-active">1995<i class="year-dot"></i></li>
	<li>1996<i class="year-dot"></i></li>
	<li>1997<i class="year-dot"></i></li>
	<li>1998<i class="year-dot"></i></li>
	<li>1999<i class="year-dot"></i></li>
	<li>2000<i class="year-dot"></i></li>
	<li>2001<i class="year-dot"></i></li>
	<li>2002<i class="year-dot"></i></li>
	<li>2003<i class="year-dot"></i></li>
	<li>2004<i class="year-dot"></i></li>
	<li>2005<i class="year-dot"></i></li>
</ul>
<div class="dotted-line"></div>
<div id="cList">
	<a href="#" id="btnLeft">&lt;</a>
	<div style="width: 850px;margin: 0 auto; overflow: hidden">
		<ul id="cUl">
			<li>
				<span class="li-tit">1</span>
				<div class="container-li">
					<div class="c-li-left">
						<img src="images/a1.png" alt="">
					</div>
					<div class="c-li-right">
						<p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
						<p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
					</div>
				</div>
			</li>
			<li>
				<span class="li-tit">2</span>
				<div class="container-li">
					<div class="c-li-left">
						<img src="images/a2.png" alt="">
					</div>
					<div class="c-li-right">
						<p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
						<p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
					</div>
				</div>
			</li>
			<li>
				<span class="li-tit">3</span>
				<div class="container-li">
					<div class="c-li-left">
						<img src="images/a3.png" alt="">
					</div>
					<div class="c-li-right">
						<p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
						<p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
					</div>
				</div>
			</li>
			<li>
				<span class="li-tit">4</span>
				<div class="container-li">
					<div class="c-li-left">
						<img src="images/a4.png" alt="">
					</div>
					<div class="c-li-right">
						<p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
						<p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
					</div>
				</div>
			</li>
			<li>
				<span class="li-tit">5</span>
				<div class="container-li">
					<div class="c-li-left">
					   <img src="images/a1.png" alt="">
					</div>
					<div class="c-li-right">
						<p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
						<p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
					</div>
				</div>
			</li>
			<li>
				<span class="li-tit">6</span>
				<div class="container-li">
					<div class="c-li-left">
						<img src="images/a2.png" alt="">
					</div>
					<div class="c-li-right">
						<p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
						<p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
					</div>
				</div>
			</li>
			<li>
				<span class="li-tit">7</span>
				<div class="container-li">
					<div class="c-li-left">
						<img src="images/a3.png" alt="">
					</div>
					<div class="c-li-right">
						<p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
						<p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
					</div>
				</div>
			</li>
			<li>
				<span class="li-tit">8</span>
				<div class="container-li">
					<div class="c-li-left">
						<img src="images/a4.png" alt="">
					</div>
					<div class="c-li-right">
						<p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
						<p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
					</div>
				</div>
			</li>
			<li>
				<span class="li-tit">9</span>
				<div class="container-li">
					<div class="c-li-left">
						<img src="images/a1.png" alt="">
					</div>
					<div class="c-li-right">
						<p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
						<p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
					</div>
				</div>
			</li>
			<li>
				<span class="li-tit">10</span>
				<div class="container-li">
					<div class="c-li-left">
						<img src="images/a2.png" alt="">
					</div>
					<div class="c-li-right">
						<p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
						<p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
					</div>
				</div>
			</li>
			<li>
				<span class="li-tit">11</span>
				<div class="container-li">
					<div class="c-li-left">
						<img src="images/a3.png" alt="">
					</div>
					<div class="c-li-right">
						<p>1995年12月25日,这是淮北创城梦想启航的日子。这一天,市委市政府的决策者们,刚从在江苏省张家港市召开的全国精神文明建设现场会回来,被张家港"两个文明"协调发展的成就深深震撼。<p>
						<p>大家进行了热烈的讨论:作为一座煤城,淮北自然条件先天不足,多年的煤炭开采使生态环境遭到严重破坏,且经济结构单一、总量不大,城市基础设施还很薄弱,如何探索创建文明城市的新路?如何满足人民对美好生活的向往呢?决策者们毅然决然地作出决定:把文明创建作为经济社会发展的助推器、为民惠民的总抓手,明确它的战略定位,持之以恒地抓紧抓好、抓出成效。</p>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<a href="#" id="btnRight">&gt;</a>
</div>
</div>
<!--js-->
<script type="text/javascript">
$(function(){
	$("#timeLine").timeLine({
		w:850  //每一个li的宽度
//            btnPrev:"#btnLeft",      //上一个按钮
//            btnNext: "#btnRight",  //下一个按钮
//            dateBox:"#yearList", //日期的ul盒子
//            dateArr: "#yearList li", //保存每一个日期的数组
//            conBox:"#cUl",  //保存切换内容的ul盒子
//            conArr:"#cUl li" //保存每一个内容的数
	});
});
</script>
<div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


热门标签: 滑动滑过 切换按钮 日历日期时间 form表单 时间轴 图片滑动 文字滑动 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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