jQuery orbit 幻灯片
在线实例
默认 | 带缩略图 | 带描述 |
使用方法
- <div class="wrap" style="width: 565px; height: 290px; margin: 0 auto;">
- <div id="featured">
- <a class="orbit-item" href="#" data-caption="#htmlCaption1"><img src="data:images/img1.jpg" alt="img1"></a>
- <img src="data:images/img4.jpg" alt="img4" data-caption="#htmlCaption5">
- <a href="#"><img src="data:images/img2.jpg" alt="img2"></a>
- <div class="orbit-item" style="background-color: #eee; text-align: center; line-height: 290px;">这是一个空的div,可以放 html代码、视频等等</div>
- <a href="#" data-caption="#htmlCaption3"><img src="data:images/img3.jpg" alt="img3"></a>
- </div>
- <span class="orbit-caption" id="htmlCaption1">这是幻灯片<strong>1</strong>的标题</span>
- <span class="orbit-caption" id="htmlCaption3">这是蝙蝠侠吗?</span>
- <span class="orbit-caption" id="htmlCaption5">没有链接的幻灯片</span>
- </div>
- <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
- <script src="js/jquery.orbit.min.js"></script>
- <script>
- $(window).load(function() {
- $('#featured').orbit({
- 'bullets' : true,
- 'captionAnimation' : 'slideOpen'
- });
- });
- </script>
jQuery orbit 幻灯片的更多相关文章
- 一款经典的jQuery slidizle 幻灯片
jQuery广告幻灯片进度条,水平/左右切换,垂直/上下切换,自动播放,缩略图列表切换 在线实例 默认效果 水平/左右切换 垂直/上下切换 循环 自动播放 缩略图 进度条 回调函数 使用方法 < ...
- Jquery Slick幻灯片插件
slick 是一个基于 jQuery 的幻灯片插件,具有以下特点: 支持响应式 浏览器支持 CSS3 时,则使用 CSS3 过度/动画 支持移动设备滑动 支持桌面浏览器鼠标拖动 支持循环 支持左右控制 ...
- jquery特效 幻灯片效果
jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- jquery bxslider幻灯片样式改造
找了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动. 但是官方提供的显示效果真的很难看,让人难以接受.最后只能自己DIY了. bxslider官方样 ...
- 经典的一款jQuery soChange幻灯片
soChange一款多很经典的幻灯片的jQuery插件. 实例预览 引入文件 <link rel="stylesheet" type="text/css" ...
- 【jquery】幻灯片效果
闲着无聊,用Jquery写了一个幻灯片效果. 我这人喜欢造轮子,除了jquery这种有强大开发团队的框架级别JS,其实的一些小程序都是尽量自己写. 一是因为怕出问题了没人问,二是自己写的改起来也方便. ...
- jQuery Flickerplate 幻灯片
Flickerplate 是个轻量级 jQuery 插件,大小仅为 12 kb.它允许用户点击鼠标然后转换内容,非常容易使用,响应式,支持触摸设备 在线实例 默认 圆点导航位置 动画方式 深色主题 H ...
- 经典实用jQuery soChange幻灯片实例演示
soChange一款多很经典的幻灯片的jQuery插件. 实例预览 引入文件 <link rel="stylesheet" type="text/css" ...
- jquery实现幻灯片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 如何编译Zookeeper源码
1. 安装Ant Ant下载地址:http://ant.apache.org/bindownload.cgi 解压即可. 2. 下载Zookeeper源码包 https://github.com/ap ...
- 在CentOS上构建.net自动化编译环境
我们知道在Windows上我们很容易构建于MSBuild的自动化编译环境,那么在CentOS也是可以的,主要是需要Mono. 在这儿我们选择Jenkins+Gitlab+Mono在C ...
- [翻译]AKKA笔记 - DEATHWATCH -7
当我们说Actor生命周期的时候,我们能看到Actor能被很多种方式停掉(用ActorSystem.stop或ActorContext.stop或发送一个PoisonPill - 也有一个kill和g ...
- Struts2拦截器的执行过程浅析
在学习Struts2的过程中对拦截器和动作类的执行过程一度陷入误区,特别读了一下Struts2的源码,将自己的收获分享给正在困惑的童鞋... 开始先上图: 从Struts2的图可以看出当浏览器发出请求 ...
- PHP_02之使用补充
JSON字符串在项目中的应用: ①PHP服务器给客户端JS发送JSON响应数据: PHP: $arr=[...]; echo json_encode($arr); JS: var ob ...
- Enterprise Solution 管理软件开发框架流程实战
1 定义模块和功能 执行系统功能(SAUTSF),在系统主文件(System Master File SAMF)模块中增加功能SAMFEM,Employee Master. 给有权限的用户组分配功能S ...
- 解析大型.NET ERP系统 数据审计功能
数据审计,英语表达是Audit,是追踪数据变化的过程,记录数据变化前后的值,供参考分析.通过设置,ERP可以追踪一个表的所有字段的变化,也可以只记录指定的字段的值变化.欧美企业每年都有独立的审计部门, ...
- java发送http的get、post请求
转载博客:http://www.cnblogs.com/zhuawang/archive/2012/12/08/2809380.html Http请求类 package wzh.Http; impor ...
- console.log("A"-"B"+"3")=?
(点击上方的订阅号,可快速关注,关注有惊喜哦^_^) 前不久看到一道JS基础题目,做了一下竟然错了一半...在此分享一下: 先把题目放上来,大家可以自己测试一下再看答案哦^_^ ①console.lo ...
- IDEA+weblogic部署运行项目
前段时间再服务器上为了部署一个系统,一直存在各种问题,不过过程中倒是把weblogic的部署掌握地特别熟练,下面就一些主要步骤做个记录:1.自己用的是IDEA,所以打开项目之后需要设置src/main ...