<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>横向（纵向）时间轴tab标签切换和水平（垂直）切换幻灯片效果 demo2# 纵向滚动</title>
<link rel="stylesheet" href="css/lrzj_y.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.timelinr-0.9.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$().timelinr({
orientation: 'vertical',
lrzj_lineSpeed: 300,
datesSpeed: 100,
lrzj_lineSpeed: 500,
arrowKeys: 'true',
startAt: 3
})
});
</script>
</head>
<body>
<p style="font-size:18px; text-align:center; padding-top:50px;"><b><a href="index横向.html">横向效果一</a> <a href="index纵向.html">纵向效果二</a></b></p>
<div id="lrzj_y">
<ul id="dates">
<li><a href="#" class="selected">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="lrzj_line">
<li id="#1900" class="selected">
<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_top"></div>
<div id="grad_bottom"></div>
<a href="#" id="next">+</a>
<a href="#" id="prev">-</a>
</div>
</body>
</html>
js实现 横向和纵向时间轴切换幻灯片效果
5星 · 超过95%的资源 需积分: 50 84 浏览量
2014-08-28
13:28:43
上传
评论
收藏 794KB ZIP 举报 
js实现 横向和纵向时间轴切换幻灯片效果.zip （26个子文件） 
横向和纵向时间轴切换幻灯片效果 
index纵向.html 7KB images 
prev.png 3KB 4.png 54KB next.png 3KB biggerdot.png 1016B 3.png 71KB grad_top.png 989B prev_v.png 3KB grad_right.png 981B next_v.png 3KB grad_bottom.png 986B grad_left.png 981B 7.png 70KB 5.png 63KB 1.png 113KB 2.png 47KB
dot.gif 1KB 6.png 97KB 8.png 78KB 9.png 79KB 10.png 64KB js 
jquery.min.js 93KB jquery.timelinr-0.9.3.js 12KB css lrzj_x.css 3KB lrzj_y.css 3KB index横向.html 7KB资源评论
leex19812019-01-11谢谢楼主分享啊！很好的资料！好好学习下啊。- bxline2015-07-16还行，挺好用的，已经调试成功
