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



236 941 314



特效描述:时间轴 滑动选项卡 横向滑动 纵向滑动 选项卡切换,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>



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


热门标签: 滑动导航菜单 导航切换 时间轴 滑动选项卡切换 日历选择器 图片滑动 图片切换 时间日期插件 文字滑动 文字切换 滑动手风琴 背景切换 滑动星星打分 手风琴 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滑动滑过 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 日历日期时间

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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