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 解决时间轴滚动到最后一个还会滚动，留出空白（）
