jQuery时间轴滑动选项卡_横向和纵向滑动选项卡切换代码



197 785 262



特效描述:时间轴 滑动选项卡 横向滑动 纵向滑动 选项卡切换,jQuery实现可滚动的横向和纵向的时间轴幻灯片效果,喜欢的朋友可以下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

2. 引入JS

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

3. HTML代码

<a style="display:block;width:200px;font-size:16px;margin:40px auto 0 auto;" href="vertical.html">查看纵排效果</a>
<div id="timeline">
	<ul id="dates">
		<li><a href="#">1900</a></li>
		<li><a href="#">1930</a></li>
		<li><a href="#">1944</a></li>
		<li><a href="#">1950</a></li>
		<li><a href="#">1971</a></li>
		<li><a href="#">1977</a></li>
		<li><a href="#">1989</a></li>
		<li><a href="#">1999</a></li>
		<li><a href="#">2001</a></li>
		<li><a href="#">2011</a></li>
	</ul>
	<ul id="issues">
		<li id="#1900">
			<img src="images/1.png" width="256" height="256" />
			<h1>1900</h1>
			<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
		</li>
		<li id="#1930">
			<img src="images/2.png" width="256" height="256" />
			<h1>1930</h1>
			<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
		</li>
		<li id="#1944">
			<img src="images/3.png" width="256" height="256" />
			<h1>1944</h1>
			<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
		</li>
		<li id="#1950">
			<img src="images/4.png" width="256" height="256" />
			<h1>1950</h1>
			<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
		</li>
		<li id="#1971">
			<img src="images/5.png" width="256" height="256" />
			<h1>1971</h1>
			<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
		</li>
		<li id="#1977">
			<img src="images/6.png" width="256" height="256" />
			<h1>1977</h1>
			<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
		</li>
		<li id="#1989">
			<img src="images/7.png" width="256" height="256" />
			<h1>1989</h1>
			<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
		</li>
		<li id="#1999">
			<img src="images/8.png" width="256" height="256" />
			<h1>1999</h1>
			<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
		</li>
		<li id="#2001">
			<img src="images/9.png" width="256" height="256" />
			<h1>2001</h1>
			<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
		</li>
		<li id="#2011">
			<img src="images/10.png" width="256" height="256" />
			<h1>2011</h1>
			<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
		</li>
	</ul>
	<div id="grad_left"></div>
	<div id="grad_right"></div>
	<a href="#" id="next">+</a>
	<a href="#" id="prev">-</a>
</div>



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


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 日期时间 时钟 日历 时间 日历插件 时间日期插件 时间轴 竖直时间轴 横向时间轴 滑动选项卡 滑动切换 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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