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://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美女幻灯相册轮播源代码的更多相关文章
- jQuery轻量级京东图片轮播代码等
http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码 查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...
- 使用javascript,jquery实现的图片轮播功能
使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- JQuery slidebox实现图片轮播
jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
- jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于jQuery的图片左右轮播，基本原理通用
毕竟新人,写点基础的小东西,希望能和大家沟通交流,提高自己的水平. 这个是应用较多的轮播部分,希望能和大家分享一下思路,拓宽视野. 话不多说,上内容. 我的思路很简单就是通过判断index值的大小变化 ...
- JQuery简单实现图片轮播效果
很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...
随机推荐
- PCA与LDA的区别与联系
由于涉及内容较多,这里转载别人的博客: http://blog.csdn.net/sunmenggmail/article/details/8071502 其实主要在于:PCA与LDA的变换矩阵不同, ...
- MySQL 数据库主从复制架构
前文<MySQL 数据库事务与复制>分析了 MySQL 复制过程中如何保证 binlog 和事务数据之间的一致性,本文进一步分析引入从库后需要保证主从的数据一致性需要考虑哪些方面. 原生复 ...
- ASP.NET Core 数据保护（Data Protection）【上】
前言 上一篇博客记录了如何在 Kestrel 中使用 HTTPS(SSL), 也是我们目前项目中实际使用到的. 数据安全往往是开发人员很容易忽略的一个部分,包括我自己.近两年业内也出现了很多因为安全问 ...
- ABP理论学习之Abp Session
返回总目录 本篇目录 介绍 注入Session 使用Session属性 介绍 当应用程序要求用户登录时,那么应用程序也需要知道当前用户正在执行的操作.虽然ASP.NET本身在展现层提供了Session ...
- iTextSharp 116秒处理6G的文件
前言: 有一家印刷企业专为米兰新娘,微微新娘,金夫人这样的影楼印刷婚纱相册.通过一个B2B销售终端软件,把影楼的相片上传到印刷公司的服务器,服务器对这些图片进行处理. 比如: 1)为每个图片生成订单条 ...
- MySQL 体系结构
标签:MYSQL/数据库/查询原理/体系结构 概述 学习一门数据库系统首先得了解它的架构,明白它的架构原理对于后期的分析问题和性能调优都有很大的帮助,接下来就通过分析架构图来认识它. 目录 概述 架构 ...
- Android 两个activity生命周期的关系
Acitivity的生命周期想必大家都清楚,但是两个activity之间其实不是独立各自进行的. 从第一个activity1启动另外一个activity2时,会先调用本activity1的onPaus ...
- 你可能不知道的7个CSS单位
如果你是一名前端开发工程师,一般px和em使用频率比较高.但是今天本文的重点是介绍一些我们使用很少.甚至么有听说的单位. 一.重温em <style type="text/css&qu ...
- Azure PowerShell (12) 通过Azure PowerShell创建SSH登录的Linux VM
<Windows Azure Platform 系列文章目录> 本章将介绍如何使用Azure PowerShell,创建SSH登录的Linux VM 前提要求: 1.安装Azure Pow ...
- ES6新特性之 promise
新的ES6中引入了promise的概念,目的是让回调更为优雅.层层嵌套的回调会让javascript失去美感和可读性,同时javascript也推荐采用链式的方式去书写函数调用.于是Promise就应 ...