體驗效果：http://hovertree.com/texiao/jquery/
本幻燈片包含小圖列表和大圖輪播，包含圖片標題和詳細介紹，詳細介紹字數可以很多，每張圖片包含鏈接，可以實現跳轉
HTML文件代碼如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jQuery幻燈相冊輪播效果- 何問起</title> <meta charset="utf-8" /> <link type="text/css" rel="stylesheet" href="http://hovertree.com/texiao/jquery/index/hovertreesildes.css"> <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js" type="text/javascript"></script> <script src="http://hovertree.com/texiao/jquery/index/hvtslides-1.1.1-min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#hovertreesildes').hvtSlides( { thumb:true, thumbPage:true, thumbDirection:"Y", effect:'fade' } ); }) </script> <style>.hvtshow{width:736px;margin:0px auto;} .hvtshow a{color:white}</style> </head> <body> <div class="hvtshow"><a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">更多特效</a> <a href="http://hovertree.com/hvtart/bjae/upnrkt1d.htm">原文</a> <a href="http://hovertree.com/down/">HoverTreeCMS</a> <a href="http://keleyi.com">柯樂義</a></div> <div class="wrap"> <div id="hovertreesildes"> <div class="control"> <ul class="change"></ul> </div> <div class="thumbWrap"> <div class="thumbCont"> <ul> <!-- img屬性, url=url, text=描述, bigimg=大圖, alt=標題 --> <li><div><img src="http://hovertree.com/texiao/jquery/index/1_0.jpg" url="http://hovertree.com/" text="何問起素材 上海，近日楊冪劉愷威一同出現在上海浦東機場，當天兩人均是一身休閑裝扮楊冪更是素顏戴着墨鏡出現，在拿完行李之后兩人便與同伴告別，劉愷威推着行李車一路快走准備離開，楊冪只得跟在其身后一路小跑才追上男友，挽着男友手臂一起走出機場，可剛走出機場沒多遠劉愷威又再一次撒腿就跑，害的身后的楊冪只能不顧形象的在其身后猛追，之后兩人紛紛消失在機場的出口處。" bigImg="http://hovertree.com/texiao/jquery/index/h1.jpg" alt="組圖：男友劉愷威疑生氣 楊冪機場當眾撒腿狂追"></div></li> <li><div><img src="http://hovertree.com/texiao/jquery/index/10_0.jpg" url="http://hovertree.com/" text="ASP.NET開源項目HoverTreeCMS，使用C#語言開發，基於.NET 4.0，數據庫采用SQL SERVER 2008。最新開發版本下載：http://hovertree.com/down/ " bigImg="http://hovertree.com/texiao/jquery/index/h10.jpg" alt="HoverTreeCMS是一個開源的ASP.NET項目"></div></li> <li><div><img src="http://hovertree.com/texiao/jquery/index/11_0.jpg" url="http://hovertree.com/texiao/mobile/5.htm" text="效果體驗：http://hovertree.com/texiao/mobile/5.htm 可以使用手機瀏覽器查看體驗效果。" bigImg="http://hovertree.com/texiao/jquery/index/h11.jpg" alt="手機底部導航欄hovertreebottom"></div></li> <li><div><img src="http://hovertree.com/texiao/jquery/index/12_0.jpg" url="http://hovertree.com/" text="HoverTree" bigImg="http://hovertree.com/texiao/jquery/index/h12.jpg" alt="何問起"></div></li> <li><div><img src="http://hovertree.com/texiao/jquery/index/1_0.jpg" url="http://hovertree.com/" text="騰訊娛樂訊 上海，近日楊冪劉愷威一同出現在上海浦東機場，當天兩人均是一身休閑裝扮楊冪更是素顏戴着墨鏡出現，在拿完行李之后兩人便與同伴告別，劉愷威推着行李車一路快走准備離開，楊冪只得跟在其身后一路小跑才追上男友，挽着男友手臂一起走出機場，可剛走出機場沒多遠劉愷威又再一次撒腿就跑，害的身后的楊冪只能不顧形象的在其身后猛追，之后兩人紛紛消失在機場的出口處。" bigImg="http://hovertree.com/texiao/jquery/index/h1.jpg" alt="組圖：男友劉愷威疑生氣 楊冪機場當眾撒腿狂追"></div></li> <li><div><img src="http://hovertree.com/texiao/jquery/index/11_0.jpg" url="http://keleyi.com/" text="http://keleyi.com/" bigImg="http://hovertree.com/texiao/jquery/index/h11.jpg" alt="柯樂義"></div></li> <li><div><img src="http://hovertree.com/texiao/jquery/index/12_0.jpg" url="http://hovertree.com/texiao/jquery/5.htm" text="效果預覽：http://hovertree.com/texiao/jquery/5.htm" bigImg="http://hovertree.com/texiao/jquery/index/h12.jpg" alt="HoverTree用戶數字打分評價特效"></div></li> <li><div><img src="http://hovertree.com/texiao/jquery/index/1_0.jpg" url="http://hovertree.com/" text="騰訊娛樂訊 上海，近日楊冪劉愷威一同出現在上海浦東機場，當天兩人均是一身休閑裝扮楊冪更是素顏戴着墨鏡出現，在拿完行李之后兩人便與同伴告別，劉愷威推着行李車一路快走准備離開，楊冪只得跟在其身后一路小跑才追上男友，挽着男友手臂一起走出機場，可剛走出機場沒多遠劉愷威又再一次撒腿就跑，害的身后的楊冪只能不顧形象的在其身后猛追，之后兩人紛紛消失在機場的出口處。" bigImg="http://hovertree.com/texiao/jquery/index/h1.jpg" alt="組圖：男友劉愷威疑生氣 楊冪機場當眾撒腿狂追"></div></li> <li><div><img src="http://hovertree.com/texiao/jquery/index/12_0.jpg" url="http://hovertree.com/texiao/jeasyui/1.htm" text="效果體驗：http://hovertree.com/texiao/jeasyui/1.htm" bigImg="http://hovertree.com/texiao/jquery/index/h12.jpg" alt="EasyUI彈出窗口實例"></div></li> <li><div><img src="http://hovertree.com/texiao/jquery/index/10_0.jpg" url="http://hovertree.com/menu/hovertreecms/" text="http://hovertree.com/menu/hovertreecms/" bigImg="http://hovertree.com/texiao/jquery/index/h10.jpg" alt="HoverTreeCMS"></div></li> <li><div><img src="http://hovertree.com/texiao/jquery/index/11_0.jpg" url="http://hovertree.com/menu/jquery/" text="http://hovertree.com/menu/jquery/" bigImg="http://hovertree.com/texiao/jquery/index/h11.jpg" alt=" jQuery "></div></li> <li><div><img src="http://hovertree.com/texiao/jquery/index/12_0.jpg" url="http://hovertree.com/" text="http://hovertree.com/menu/aspnet/" bigImg="http://hovertree.com/texiao/jquery/index/h12.jpg" alt="ASP.NET "></div></li> </ul> </div> </div> </div> </div> </body> </html>
js,jquery,css,html5特效 http://www.cnblogs.com/roucheng/p/texiao.html