体验效果：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. 拥抱.NET Core，学习.NET Core的基础知识补遗

    前言 .NET Core的新特性之一就是跨平台,但由于对之前框架的兼容导致编写一个.NET Core类库变得相当复杂,主要体现为相当多的框架目标和支持平台,今天我们就对.NET Core的跨平台特性进 ...

  2. CSP的今世与未来

    一.从两个工具说起 最近Google又推出了两款有关CSP利用的小工具,其一为CSP Evaluator,这是一个能够评估你当前输入的CSP能否帮助你有效避免XSS攻击的工具,其用法非常简单,在输入框 ...

  3. 夜深了，写了个JQuery的省市区三级级联效果

    刚刚练手的JQuery,希望大神们指正 主要实现以下功能: 1.三级菜单级联加载数据 2.可以在不操作脚本的情况下,给元素加属性实现级联功能 3.自定义动态显示数据 咨询问题: 对于一般比较固定不变的 ...

  4. 接口自动化测试的"开胃小菜"---简单黑客攻击手段

    Web应用系统的小安全漏洞及相应的攻击方式 接口自动化测试的"开胃小菜" 1   写作目的 本文讲述一个简单的利用WebAPI来进行一次基本没有破坏力的“黑客”行为. 主要目的如下 ...

  5. [译]Asp.net MVC 之 Contorllers（一）

    Asp.net MVC contorllers 在Ajax全面开花的时代,ASP.NET Web Forms 开始慢慢变得落后.有人说,Ajax已经给了Asp.net致命一击.Ajax使越来越多的控制 ...

  6. Modern OpenGL用Shader拾取VBO内单一图元的思路和实现(2)

    Modern OpenGL用Shader拾取VBO内单一图元的思路和实现(2) 上一篇里介绍了Color-Coded Picking的思路和最基本的实现.在处理GL_POINTS时已经没有问题,但是处 ...

  7. Android笔记——提升ListView的运行效率

    之所以说 ListView 这个控件很难用,就是因为它有很多的细节可以优化,其中运行效率就是很重要的一点.目前我们ListView 的运行效率是很低的,因为在 FruitAdapter 的getVie ...

  8. ajax局部刷新后，如何让局部中的百度分享重新加载

    我这个人不怎么喜欢说太多话,看几个图你们就懂了 Ajax前 Ajax之后 原因分析 解决方法 收工 百度分享是集成了众多主流第三方网站分享和收藏按钮的工具. 通过百度分享轻松将主流第三方网站的分享按钮 ...

  9. UML基础系列：类图

    类图描述系统中类的静态结构,它不仅定义系统中的类,描述类之间的联系,如关联.依赖.聚合等,还包括类的内部结构(类的属性和操作).类图描述的是静态关系,在系统的整个生命周期中都是有效的.对象图是类图的实 ...

  10. Android启动模式

    在Android中每个界面都是一个Activity,切换界面操作其实是多个不同Activity之间的实例化操作.在Android中Activity的启动模式决定了Activity的启动运行方式. An ...