查看效果：
http://hovertree.com/texiao/jquery/75/

源代码下载：
http://hovertree.com/h/bjaf/8jlpc2wu.htm

效果图如下：

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery时间轴幻灯展示特效 - 何问起</title>

<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/75/css/styles.css" />

<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.4.2.min.js"></script>

<script src="http://hovertree.com/texiao/jquery/75/jquery.timelinr-0.9.4.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

$().timelinr()

});

</script>

</head>

<body id="introduction">

<div id="page">

<div class="demotips"><a href="index.html">演示一</a><a href="demo2.html">演示二</a><a href="demo3.html">演示三</a></div>

<div id="container" class="content clearfix">

<div id="timeline">

<ul id="dates">

<li><a href="#1900">1900</a></li>

<li><a href="#1944">1944</a></li>

<li><a href="#1950">1950</a></li>

<li><a href="#1971">1971</a></li>

<li><a href="#1999">1999</a></li>

<li><a href="#2001">2001</a></li>

<li><a href="#2011">2011</a></li>

</ul>

<ul id="issues">

<li id="1900">

<img src="http://hovertree.com/texiao/jquery/75/images/1.png" width="256" height="256" />

<h1>1900</h1>

<p>这是一个时间轴展示幻灯片，支持自动播放，手动切换，可以竖向也可以横向，可以放图片和文本。适合网站，企业等历史的介绍。by 何问起

</p>

</li>

<li id="1944">

<img src="http://hovertree.com/texiao/jquery/75/images/3.png" width="256" height="256" />

<h1>1944</h1>

<p>

受到网店的影响，服装店的生意逐渐有所下降，老板找何问起去谈，大概是准备跟上网购潮流，让何问起准备一下，要在网上开网店，要为服装店建立网站。何问起也没说自己经验不足，只说会积极准备。于是抓紧时间查找资料，学习练习。毕竟还是有功底的，过不多久就在本地搭建了一个网站，实现了一些企业网站的基本功能，信息产品发布、留言版等。也了解了在电商网开网店的方方面面。

</p>

</li>

<li id="1950">

<img src="http://hovertree.com/texiao/jquery/75/images/4.png" width="256" height="256" />

<h1>1950</h1>

<p>

何问起准备好后，跟老板报告分析了具体情况，老板说人手不足，就从易到难逐步推行把，有什么需要尽管提。何问起又有得忙活了，但也是乐此不疲。虽然学的是纺织，而不是计算机或者软件工程等相关专业，但自从接触编程以后，兴趣就一直有增无减，也熟悉了不少网站架设，Web前端，后端程序，数据库等等的知识，开了网站hovertree.com，有向全栈工程师发展的趋势。接受了老板的这个任务后更是开心，整天精力充沛，战斗力十足。

</p>

</li>

<li id="1971">

<img src="http://hovertree.com/texiao/jquery/75/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="1999">

<img src="http://hovertree.com/texiao/jquery/75/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="http://hovertree.com/texiao/jquery/75/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="http://hovertree.com/texiao/jquery/75/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>

</div>

<p align="center">适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p><br>

<p align="center">来源：<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/texiao/" target="_blank">特效</a> <a href="http://hovertree.com/h/bjaf/sby54kjl.htm" target="_blank">原文</a></p>

</div> 

</body>

</html>

转自：http://hovertree.com/h/bjaf/sby54kjl.htm

特效汇总：http://www.cnblogs.com/roucheng/p/texiao.html

jquery时间轴幻灯展示源代码的更多相关文章

  1. jQuery时间轴插件timeline.js

    http://www.jq22.com/jquery-info13695 http://www.jq22.com/jquery-info13357 简要教程 timeline.js是一款jQuery时 ...

  2. 发展简史jQuery时间轴特效

    发展简史jQuery时间轴特效.这是一款鼠标滚动到一定的高度动画显示企业发展时间轴特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wr ...

  3. 推荐5款实用的jQuery时间轴插件

    1.使用CSS3和jQuery制作的水平时间轴 这是一个可以在PC和移动端表现非常棒的水平时间轴,它由上部水平滑块和下部时间点对应的内容区块,点击时间轴上的时间点,下部内容会滑动到对应的内容区块.使用 ...

  4. jQuery时间轴插件：jQuery Timelinr

    前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...

  5. jQ效果：jQuery时间轴插件jQuery Timelinr

    前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...

  6. jquery时间轴tab切换效果实现结合swiper实现滑动显示效果

    需求:根据时间轴进行tab页面内容切换(时间轴需要滑动查看并选择) 实现思路: 结合swiper插件实现滑动显示效果 根据transform: translateX进行左侧切换效果的实现(具体实现cs ...

  7. jQuery时间轴

    常见的时间轴导航 横向时间轴

  8. JQuery时间轴timeline插件的学习-Lateral On-Scroll Sliding with jQuery+technotarek / timeliner

    一.Lateral On-Scroll Sliding with jQuery的使用 View demo      Download source 1. HTML结构 <div id=" ...

  9. jQuery时间轴鼠标悬停动画

    在线演示 本地下载

随机推荐

  1. 使用mybatis访问sql server

    原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com mybatis作为一种半自动化的ORM工具,可以提供更大的灵活性,逐渐受到社区的欢迎. 官方下载地址是:https ...

  2. Identity自增序列/唯一断标识

    ThreadStatic应用(Identity补完) 用于在高并发环境中的自增序列维护和快速创建唯一不重复的短标识,该类是线程安全的 如在ORM组件中,创建唯一的参数名 特点: 高并发环境下的性能保证 ...

  3. iOS 常见设计模式

    (一)代理模式/委托模式 应用场景:当一个类的某些功能需要由别的类来实现,但是又不确定具体会是哪个类实现.优势:解耦合敏捷原则:开放-封闭原则实例:tableview的 数据源delegate,通过和 ...

  4. Java基础之泛型

    泛型: (1)为什么会出现泛型? 因为集合存放的数据类型不固定,故往集合里面存放元素时,存在安全隐患, 如果在定义集合时,可以想定义数组一样指定数据类型,那么就可以解决该类安全问题. JDK1.5后出 ...

  5. EF架构~为BulkInsert引入SET IDENTITY_INSERT ON功能

    回到目录 在设计表结构时,我们通常将不是很在乎表现的主键设计成自增长的,大数据量用bigint,一般地用int就可以了,int就是C#里的Int32,它最大可以存储到2147483647,21亿,基本 ...

  6. javascript_basic_02之数据类型、分支结构

    1.弱类型:声明无需指定数据类型,由值决定,查看变量数据类型:typeof(变量): 2.隐式转换:任何数据类型与string类型相加,结果为string类型: 3.显式(强制)转换: ①toStri ...

  7. KnockoutJS 3.X API 第三章 计算监控属性(3) KO如何实现依赖追踪

    KO是如何实现自动更新的 初学者可以掠过该篇,如果你是一个刨根问底的开发者,那本节将告诉你KO是如何实现依赖追踪和UI自动更新的. 其实很简单,KO的依赖追踪算法如下: 当你声明一个计算监控属性,KO ...

  8. 【WP8.1开发】选择与搜索联系人

    在需要的情况下,可以通过相关的API来访问手机上的联系人信息:当然,在不必要的情况下,不要随便去获取别人的数据. 要从联系人列表中选择并获取一位或者N位联系人的详细信息,比较简单的做法是利用Conta ...

  9. 利用libpcap打印ip包

    #include <stdio.h> #include <pcap.h> #include <time.h> #include <netinet/in.h&g ...

  10. Cwinux源码解析（四）

    我在我的 薛途的博客 上发表了新的文章,欢迎各位批评指正. Cwinux源码解析(四)