jQuery美女幻燈相冊(cè)輪播源代碼

2024-04-27 15:02:54

字體：大中小

供稿：網(wǎng)友

體驗(yàn)效果：http://hovertree.com/texiao/jquery/

本幻燈片包含小圖列表和大圖輪播，包含圖片標(biāo)題和詳細(xì)介紹，詳細(xì)介紹字?jǐn)?shù)可以很多，每張圖片包含鏈接，可以實(shí)現(xiàn)跳轉(zhuǎn)

HTML文件代碼如下：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>jQuery幻燈相冊(cè)輪播效果- 何問起</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=標(biāo)題 --><li><div><img src="http://hovertree.com/texiao/jquery/index/1_0.jpg" url="http://hovertree.com/" text="何問起素材 上海，近日楊冪劉愷威一同出現(xiàn)在上海浦東機(jī)場，當(dāng)天兩人均是一身休閑裝扮楊冪更是素顏戴著墨鏡出現(xiàn)，在拿完行李之后兩人便與同伴告別，劉愷威推著行李車一路快走準(zhǔn)備離開，楊冪只得跟在其身后一路小跑才追上男友，挽著男友手臂一起走出機(jī)場，可剛走出機(jī)場沒多遠(yuǎn)劉愷威又再一次撒腿就跑，害的身后的楊冪只能不顧形象的在其身后猛追，之后兩人紛紛消失在機(jī)場的出口處。" bigImg="http://hovertree.com/texiao/jquery/index/h1.jpg" alt="組圖：男友劉愷威疑生氣 楊冪機(jī)場當(dāng)眾撒腿狂追"></div></li><li><div><img src="http://hovertree.com/texiao/jquery/index/10_0.jpg" url="http://hovertree.com/" text="asp.net開源項(xiàng)目HoverTreeCMS，使用C#語言開發(fā)，基于.NET 4.0，數(shù)據(jù)庫采用SQL SERVER 2008。最新開發(fā)版本下載：http://hovertree.com/down/ " bigImg="http://hovertree.com/texiao/jquery/index/h10.jpg" alt="HoverTreeCMS是一個(gè)開源的ASP.NET項(xiàng)目"></div></li><li><div><img src="http://hovertree.com/texiao/jquery/index/11_0.jpg" url="http://hovertree.com/texiao/mobile/5.htm" text="效果體驗(yàn)：http://hovertree.com/texiao/mobile/5.htm 可以使用手機(jī)瀏覽器查看體驗(yàn)效果。" bigImg="http://s1.vevb.com/20151016/dwyrs1uu2tv48.jpg" alt="手機(jī)底部導(dǎo)航欄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="騰訊娛樂訊 上海，近日楊冪劉愷威一同出現(xiàn)在上海浦東機(jī)場，當(dāng)天兩人均是一身休閑裝扮楊冪更是素顏戴著墨鏡出現(xiàn)，在拿完行李之后兩人便與同伴告別，劉愷威推著行李車一路快走準(zhǔn)備離開，楊冪只得跟在其身后一路小跑才追上男友，挽著男友手臂一起走出機(jī)場，可剛走出機(jī)場沒多遠(yuǎn)劉愷威又再一次撒腿就跑，害的身后的楊冪只能不顧形象的在其身后猛追，之后兩人紛紛消失在機(jī)場的出口處。" bigImg="http://hovertree.com/texiao/jquery/index/h1.jpg" alt="組圖：男友劉愷威疑生氣 楊冪機(jī)場當(dāng)眾撒腿狂追"></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://s1.vevb.com/20151016/dwyrs1uu2tv48.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="效果預(yù)覽：http://hovertree.com/texiao/jquery/5.htm" bigImg="http://hovertree.com/texiao/jquery/index/h12.jpg" alt="HoverTree用戶數(shù)字打分評(píng)價(jià)特效"></div></li><li><div><img src="http://hovertree.com/texiao/jquery/index/1_0.jpg" url="http://hovertree.com/" text="騰訊娛樂訊 上海，近日楊冪劉愷威一同出現(xiàn)在上海浦東機(jī)場，當(dāng)天兩人均是一身休閑裝扮楊冪更是素顏戴著墨鏡出現(xiàn)，在拿完行李之后兩人便與同伴告別，劉愷威推著行李車一路快走準(zhǔn)備離開，楊冪只得跟在其身后一路小跑才追上男友，挽著男友手臂一起走出機(jī)場，可剛走出機(jī)場沒多遠(yuǎn)劉愷威又再一次撒腿就跑，害的身后的楊冪只能不顧形象的在其身后猛追，之后兩人紛紛消失在機(jī)場的出口處。" bigImg="http://hovertree.com/texiao/jquery/index/h1.jpg" alt="組圖：男友劉愷威疑生氣 楊冪機(jī)場當(dāng)眾撒腿狂追"></div></li><li><div><img src="http://hovertree.com/texiao/jquery/index/12_0.jpg" url="http://hovertree.com/texiao/jeasyui/1.htm" text="效果體驗(yàn)：http://hovertree.com/texiao/jeasyui/1.htm" bigImg="http://hovertree.com/texiao/jquery/index/h12.jpg" alt="EasyUI彈出窗口實(shí)例"></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://s1.vevb.com/20151016/dwyrs1uu2tv48.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>