体验效果：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. Android零散

    2016-03-13 Android零散 ListView中嵌套GridView 要实现分组列表这样的效果:点击ListView中的分组名称,即展开此分组显示其包含的项目.使用ExpandableLi ...

  2. Windows安装和使用zookeeper

    之前整理过一篇文章<zookeeper 分布式锁服务>,本文介绍的 Zookeeper 是以 3.4.5 这个稳定版本为基础,最新的版本可以通过官网 http://hadoop.apach ...

  3. JVM 备注

    一.堆内存分布: JAVA 分为堆内存和栈内存,GC主要针对堆内存 1)Young: 存放新生内存对象 1.1)Eden JVM 刚开始分配的对象 1.2)Survivor1(from) 1.3)Su ...

  4. Azure Service Febric 笔记：Web API应用

    1.什么是Service Febric 贴一段微软官方的介绍 Service Fabric 是一种分布式系统平台,可让你轻松打包.部署和管理可缩放.可靠的微服务.Service Fabric 还解决了 ...

  5. python定时重跑获取数据

    做大数据的童鞋经常会写定时任务跑数据,由于任务之间的依赖(一般都是下游依赖上游的数据产出),所以经常会导致数据获取失败,因为很多人发现数据失败后 都会去查看日志,然后手动去执行自己的任务.下面我实现了 ...

  6. VB.NET 如何进行调用HTTP外部接口

    直接上干货  Private Function POST(ByVal URL$, ByVal data$) Dim http On Error Resume Next http = CreateObj ...

  7. Polynomial Library in OpenCascade

    Polynomial Library in OpenCascade eryar@163.com 摘要Abstract:分析幂基曲线即多项式曲线在OpenCascade中的计算方法,以及利用OpenSc ...

  8. c++与java中子类中调用父类成员的方法

    java中: import java.util.Scanner; public class ClassTest{ public static void main(String args[]){ chi ...

  9. 修复bootstrap daterangepicker中的3个问题

    最近项目中使用了一个基于Bootstrap的daterangepicker控件. 1.点击页面其他空白的地方,会把之前在日历上选中的日期选择上. 具体描述: 1.点击打开日期选择框 2.选择一个日期范 ...

  10. Oracle常用函数

    前一段时间学习Oracle 时做的学习笔记,整理了一下,下面是分享的Oracle常用函数的部分笔记,以后还会分享其他部分的笔记,请大家批评指正. 1.Oracle 数据库中的to_date()函数的使 ...