体验效果：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美女幻灯相册轮播源代码的更多相关文章

  1. jQuery轻量级京东图片轮播代码等

    http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码   查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...

  2. 使用javascript,jquery实现的图片轮播功能

    使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...

  3. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  4. JQuery slidebox实现图片轮播

    jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...

  5. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  6. JQuery插件之图片轮播插件–slideBox

    来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...

  7. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 基于jQuery的图片左右轮播，基本原理通用

    毕竟新人,写点基础的小东西,希望能和大家沟通交流,提高自己的水平. 这个是应用较多的轮播部分,希望能和大家分享一下思路,拓宽视野. 话不多说,上内容. 我的思路很简单就是通过判断index值的大小变化 ...

  9. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

随机推荐

  1. MVC学习一：EF

    目录 一.EF修改和删除的多种方法 二.标准查询where 三.include 四.skip take 五.反射获取实例属性 六.EF DLL数据访问帮助类 一.EF修改和删除的多种方法 方法1:官方 ...

  2. ABP理论学习之通知系统

    返回总目录 本篇目录 介绍 订阅通知 发布通知 用户通知管理者 实时通知 通知存储 通知定义 介绍 通知(Notification)用于告知用户系统中的特定事件.ABP提供了基于实时通知基础设施的发布 ...

  3. Windows环境安装Linux系统及JDK部署

    前言 由于我的笔记本有点问题,所以这周系统包括所有硬盘全部重装了,原来的Linux虚拟机都没了,因此才有了这篇文章和各位朋友们分享. 由于Linux环境的优越性(开源.低成本.安全性好.网络功能强大) ...

  4. ASP.Net MVC开发基础学习笔记：二、HtmlHelper与扩展方法

    一.一个功能强大的页面开发辅助类—HtmlHelper初步了解 1.1 有失必有得 在ASP.Net MVC中微软并没有提供类似服务器端控件那种开发方式,毕竟微软的MVC就是传统的请求处理响应的回归. ...

  5. Python yield与实现

    Python yield与实现  yield的功能类似于return,但是不同之处在于它返回的是生成器. 生成器 生成器是通过一个或多个yield表达式构成的函数,每一个生成器都是一个迭代器(但是迭 ...

  6. awk神器

      序   产品经理(PM)过来找你要最近某某的数据,而你知道这些数据目前只能通过日志文件去分析,因为我们知道,我们不可能把所有数据都放入db中(这不科学啊!).每当有这样任务的时候,你就用php或j ...

  7. Qcon会议之所见所想

    作为普通码农一枚,Qcon是俺参与过的最高级的技术大会了.大会共历时三天,因为俺第二天就得赶火车休个五一大长假,所以只参加了第一天4/25号的会议(其他俩天自然有其他同事会去观摩),不过第一天的会议有 ...

  8. ios crash的原因与抓取crash日志的方法

    首先我们经常会闪退的异常有哪些呢?crash的产生来源于两种问题:违反iOS策略被干掉,以及自身的代码bug. 1.IOS策略 1.1 低内存闪退 前面提到大多数crash日志都包含着执行线程的栈调用 ...

  9. KnockoutJS 3.X API 第七章 其他技术(7) 微任务

    注意:本文档适用于Knockout 3.4.0及更高版本. Knockout的微任务队列 Knockout的微任务队列支持调度任务尽可能快地运行,同时仍然是异步的,努力安排它们在发生I / O,回流或 ...

  10. Android入门(二十二)解析JSON

    原文链接:http://www.orlion.ga/687/ 解析JSON的方式有很多,主要有官方提供的 JSONObject,谷歌的开源库 GSON.另外,一些第三方的开源库如 Jackson.Fa ...