superslider实现发展历程（时间轴）

http://www.superslide2.com/param.html

--superslider插件地址

html

  1 <div class="dsj">
  2                 <div class="ylistbox">
  3                     <div class="ycontrol prev"></div>
  4                     <div class="tablistbox">
  5                         <ul class="tablist ul">
  6                             <li>
  7                                 <span>2003年</span>
  8                             </li>
  9                             <li>
 10                                 <span>2004年</span>
 11                             </li>
 12                             <li>
 13                                 <span>2005年</span>
 14                             </li>
 15                             <li>
 16                                 <span>2006年</span>
 17                             </li>
 18                             <li>
 19                                 <span>2007年</span>
 20                             </li>
 21                             <li>
 22                                 <span>2008年</span>
 23                             </li>
 24                             <li>
 25                                 <span>2009年</span>
 26                             </li>
 27                             <li>
 28                                 <span>2010年</span>
 29                             </li>
 30                             <li>
 31                                 <span>2011年</span>
 32                             </li>
 33                             <li>
 34                                 <span>2012年</span>
 35                             </li>
 36                             <li>
 37                                 <span>2013年</span>
 38                             </li>
 39                         </ul>
 40                     </div>
 41                     <div class="ycontrol next"></div>
 42                 </div>
 43                 <div class="tabcontbox">
 44                     <ul class="tabcont ul">
 45                         <li>
 46                             <dl>
 47                                 <dd>
 48                                     <span class="date">12月</span>
 49                                     <p class="desc">联合合作伙伴：广发证券、国金道富、申万宏源证券，发行公司第13只产品“东源嘉盈回馈私募证券投资基金”。</p>
 50                                 </dd>
 51                                 <dd>
 52                                     <span class="date">12月</span>
 53                                     <p class="desc">公司董事长杨凡博士应邀参加公司作为赞助单位之一的，第六届“张培刚发展经济学优秀成果奖”颁奖典礼暨2016中国经济发展论坛，并合影留念；</p>
 54                                 </dd>
 55                                 <dd>
 56                                     <span class="date">10月</span>
 57                                     <p class="desc">联合合作伙伴：申万宏源证券，发行公司第12只产品“东源嘉盈三号私募证券投资基金”；</p>
 58                                 </dd>
 59                                 <dd>
 60                                     <span class="date">09月</span>
 61                                     <p class="desc">联合合作伙伴：广发证券、国金道富、信达证券，发行公司第11只产品“东源嘉盈回报私募证券投资基金”；</p>
 62                                 </dd>
 63                                 <dd>
 64                                     <span class="date">08月</span>
 65                                     <p class="desc">联合合作伙伴：财富证券，发行公司第10只产品“东源嘉盈2号证券投资基金”；</p>
 66                                 </dd>
 67                                 <dd>
 68                                     <span class="date">07月</span>
 69                                     <p class="desc">公司董事长杨凡博士代表公司向“张培刚发展经济学研究基金会”捐赠50万元。张培刚先生曾在华中科技大学任教，是国内著名经济学家，发展经济学创始人之一。</p>
 70                                 </dd>
 71                                 <dd>
 72                                     <span class="date">05月</span>
 73                                     <p class="desc">联合合作伙伴：招商证券，发行公司第1只自主发行，同时也是公司第9只产品“东源嘉盈1号基金”；</p>
 74                                 </dd>    
 75                             </dl>
 76                         </li>
 77                         <li>
 78                             2004
 79                         </li>
 80                         <li>
 81                             2005
 82                         </li>
 83                         <li>
 84                             2006
 85                         </li>
 86                         <li>
 87                             2007
 88                         </li>
 89                         <li>
 90                             2008
 91                         </li>
 92                         <li>
 93                             2009
 94                         </li>
 95                         <li>
 96                             2010
 97                         </li>
 98                         <li>
 99                             2011
100                         </li>
101                         <li>
102                             2012
103                         </li>
104                         <li>
105                             2013
106                         </li>
107                     </ul>
108                 </div>
109             </div>

css

 1 /* 发展历程 */
 2 .ylistbox{height: 51px;position: relative;}
 3 .ylistbox .ycontrol{position: absolute;bottom:14px;cursor:pointer;}
 4 .ylistbox .prev{left:0;background: url(../images/prev.jpg);width: 26px;height: 27px;}
 5 .ylistbox .prev:hover{background: url(../images/prev_on.jpg);width: 26px;height: 27px;}
 6 .ylistbox .next{right:0;background: url(../images/next.jpg);width: 26px;height: 27px;}
 7 .ylistbox .next:hover{background: url(../images/next_on.jpg);width: 26px;height: 27px;}
 8 .ylistbox .tablistbox{width: 875px;overflow: hidden;margin:0 auto;}
 9 .ylistbox li{cursor:pointer;text-align:center;font-size:18px;color:#aaaaaa;float: left;line-height: 44px;background: url(../images/dsj_li.jpg) center top no-repeat;width: 174px;height: 51px;}
10 .ylistbox li.on,
11 .ylistbox li:hover{color:white;background: url(../images/dsj_lion.jpg) center bottom no-repeat;}
12 .dsj .tabcontbox{width: 875px;margin:40px auto 0;overflow: hidden;padding:20px 0;background: url(../images/fzlc_line.jpg) 60px top repeat-y;}
13 .dsj .tabcontbox dl{}
14 .dsj .tabcontbox dd{overflow: hidden;}
15 .dsj .tabcontbox dd+dd{margin-top:35px; }
16 .dsj .tabcontbox dd .date{float: left;width: 55px;color: #641d32;font-size: 20px;}
17 .dsj .tabcontbox dd .desc{margin:0;float: left;background: url(../images/fzlc_dd.jpg) left 7px no-repeat;padding-left: 20px;width: 798px;}

js

1 $(".dsj").slide({
2          mainCell:".tabcont",titCell:".tablist li",autoPlay:false,effect:"left",trigger:"click",pnLoop:false
3     });
4     $(".dsj .ylistbox").slide({
5         mainCell:".tablistbox ul",vis:5,autoPlay:false,effect:"left",pnLoop:false,autoPage:true
6     });

 

$(".dsj .ylistbox")  记得加 autopage:true  解决时间轴滚动到最后一个还会滚动，留出空白（）

转载于:https://www.cnblogs.com/ghfjj/p/6306161.html