在线实例

默认 带缩略图 带描述

使用方法

  1. <div class="wrap" style="width: 565px; height: 290px; margin: 0 auto;">
  2. <div id="featured">
  3. <a class="orbit-item" href="#" data-caption="#htmlCaption1"><img src="data:images/img1.jpg" alt="img1"></a>
  4. <img src="data:images/img4.jpg" alt="img4" data-caption="#htmlCaption5">
  5. <a href="#"><img src="data:images/img2.jpg" alt="img2"></a>
  6. <div class="orbit-item" style="background-color: #eee; text-align: center; line-height: 290px;">这是一个空的div,可以放 html代码、视频等等</div>
  7. <a href="#" data-caption="#htmlCaption3"><img src="data:images/img3.jpg" alt="img3"></a>
  8. </div>
  9. <span class="orbit-caption" id="htmlCaption1">这是幻灯片<strong>1</strong>的标题</span>
  10. <span class="orbit-caption" id="htmlCaption3">这是蝙蝠侠吗?</span>
  11. <span class="orbit-caption" id="htmlCaption5">没有链接的幻灯片</span>
  12. </div>
  13. <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
  14. <script src="js/jquery.orbit.min.js"></script>
  15. <script>
  16. $(window).load(function() {
  17. $('#featured').orbit({
  18. 'bullets' : true,
  19. 'captionAnimation' : 'slideOpen'
  20. });
  21. });
  22. </script>
复制

jQuery orbit 幻灯片的更多相关文章

  1. 一款经典的jQuery slidizle 幻灯片

    jQuery广告幻灯片进度条,水平/左右切换,垂直/上下切换,自动播放,缩略图列表切换 在线实例 默认效果 水平/左右切换 垂直/上下切换 循环 自动播放 缩略图 进度条 回调函数 使用方法 < ...

  2. Jquery Slick幻灯片插件

    slick 是一个基于 jQuery 的幻灯片插件,具有以下特点: 支持响应式 浏览器支持 CSS3 时,则使用 CSS3 过度/动画 支持移动设备滑动 支持桌面浏览器鼠标拖动 支持循环 支持左右控制 ...

  3. jquery特效 幻灯片效果

    jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  4. jquery bxslider幻灯片样式改造

    找了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动. 但是官方提供的显示效果真的很难看,让人难以接受.最后只能自己DIY了. bxslider官方样 ...

  5. 经典的一款jQuery soChange幻灯片

    soChange一款多很经典的幻灯片的jQuery插件. 实例预览 引入文件 <link rel="stylesheet" type="text/css" ...

  6. 【jquery】幻灯片效果

    闲着无聊,用Jquery写了一个幻灯片效果. 我这人喜欢造轮子,除了jquery这种有强大开发团队的框架级别JS,其实的一些小程序都是尽量自己写. 一是因为怕出问题了没人问,二是自己写的改起来也方便. ...

  7. jQuery Flickerplate 幻灯片

    Flickerplate 是个轻量级 jQuery 插件,大小仅为 12 kb.它允许用户点击鼠标然后转换内容,非常容易使用,响应式,支持触摸设备 在线实例 默认 圆点导航位置 动画方式 深色主题 H ...

  8. 经典实用jQuery soChange幻灯片实例演示

    soChange一款多很经典的幻灯片的jQuery插件. 实例预览 引入文件 <link rel="stylesheet" type="text/css" ...

  9. jquery实现幻灯片

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 如何编译Zookeeper源码

    1. 安装Ant Ant下载地址:http://ant.apache.org/bindownload.cgi 解压即可. 2. 下载Zookeeper源码包 https://github.com/ap ...

  2. 在CentOS上构建.net自动化编译环境

             我们知道在Windows上我们很容易构建于MSBuild的自动化编译环境,那么在CentOS也是可以的,主要是需要Mono. 在这儿我们选择Jenkins+Gitlab+Mono在C ...

  3. [翻译]AKKA笔记 - DEATHWATCH -7

    当我们说Actor生命周期的时候,我们能看到Actor能被很多种方式停掉(用ActorSystem.stop或ActorContext.stop或发送一个PoisonPill - 也有一个kill和g ...

  4. Struts2拦截器的执行过程浅析

    在学习Struts2的过程中对拦截器和动作类的执行过程一度陷入误区,特别读了一下Struts2的源码,将自己的收获分享给正在困惑的童鞋... 开始先上图: 从Struts2的图可以看出当浏览器发出请求 ...

  5. PHP_02之使用补充

    JSON字符串在项目中的应用: ①PHP服务器给客户端JS发送JSON响应数据:  PHP:   $arr=[...];   echo json_encode($arr);  JS:   var ob ...

  6. Enterprise Solution 管理软件开发框架流程实战

    1 定义模块和功能 执行系统功能(SAUTSF),在系统主文件(System Master File SAMF)模块中增加功能SAMFEM,Employee Master. 给有权限的用户组分配功能S ...

  7. 解析大型.NET ERP系统 数据审计功能

    数据审计,英语表达是Audit,是追踪数据变化的过程,记录数据变化前后的值,供参考分析.通过设置,ERP可以追踪一个表的所有字段的变化,也可以只记录指定的字段的值变化.欧美企业每年都有独立的审计部门, ...

  8. java发送http的get、post请求

    转载博客:http://www.cnblogs.com/zhuawang/archive/2012/12/08/2809380.html Http请求类 package wzh.Http; impor ...

  9. console.log("A"-"B"+"3")=?

    (点击上方的订阅号,可快速关注,关注有惊喜哦^_^) 前不久看到一道JS基础题目,做了一下竟然错了一半...在此分享一下: 先把题目放上来,大家可以自己测试一下再看答案哦^_^ ①console.lo ...

  10. IDEA+weblogic部署运行项目

    前段时间再服务器上为了部署一个系统,一直存在各种问题,不过过程中倒是把weblogic的部署掌握地特别熟练,下面就一些主要步骤做个记录:1.自己用的是IDEA,所以打开项目之后需要设置src/main ...