jQuery幻燈相冊輪播效果
編輯：JQuery特效代碼
體驗效果：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://"></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="https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122917234495.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:///" text="http:///" bigImg="https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122917234495.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="https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122917234495.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>
小編推薦
熱門推薦