码迷,mamicode.com
首页 > Web开发 > 详细

jQuery幻灯相册轮播源代码

时间:2015-11-30 23:41:19      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:

体验效果: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

jQuery幻灯相册轮播源代码

标签:

原文地址:http://www.cnblogs.com/roucheng/p/lunbo.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!