在线实例

默认 带缩略图 带描述

使用方法

  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. Outfit7 庆祝其开发工作大获丰收

    走不寻常路之经验总结 每位合格应用开发人员都拥有相同的目标:灵机一动,构建独创性原型,克服各种困难,最终吸引投资者将其想法推向市场. 名声.财富以及构建更多应用的机会将接踵而至. 焦虑.改善和重复是开 ...

  2. Storm介绍(一)

    作者:Jack47 PS:如果喜欢我写的文章,欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 内容简介 本文是Storm系列之一,介绍了Storm的起源,Storm ...

  3. C#开发中使用配置文件对象简化配置的本地保存

    C#开发中使用配置文件对象简化配置的本地保存 0x00 起因 程序的核心是数据和逻辑,开发过程中免不了要对操作的数据进行设置,而有些数据在程序执行过程中被用户或程序做出的修改是应该保存下来的,这样程序 ...

  4. Java 开发主流 IDE 环境体验

    前言 本来应该继续从 Oracle 官网搬砖的,但是随着示例代码越来越复杂,涉及的类库越来越多,使用 Vim 写 Java 代码就很力不从心了,是时候上 IDE 了.我最熟悉的 IDE 环境是 Ecl ...

  5. .NET中使用Redis (二)

    很久以前写了一篇文章 .NET中使用Redis 介绍了如何安装Redis服务端,以及如何在.NET中调用Redis读取数据.本文简单介绍如何设计NoSQL数据库,以及如何使用Redis来存储对象. 和 ...

  6. C语言图形库简单对比及EGE库的安装小手册

    近期在琢磨C语言的图形库,发现主要有如下几种选择: Turbo C 的graphics库 SDL EasyX EGE 1. 普遍认为Graphics库太老了,而且TurboC本身使用比较麻烦,网上一边 ...

  7. Java常量的应用

    所谓常量,我们可以理解为是一种特殊的变量,它的值被设定后,在程序运行过程中不允许改变. 语法:final 常量名 = 值; 使用fianl关键字 常量名 值 final String a1 = &qu ...

  8. String... 用法

    今天看到一个没见过的函数参数列表test(int... a),查看资料,原来是如下用法:类型后面三个点(String...),是从Java 5开始,Java语言对方法参数支持一种新写法,叫可变长度参数 ...

  9. Spring学习记录(十三)---基于xml文件配置AOP

    上一篇讲了用注解配置AOP,现在讲用xml怎么配置AOP 其实逻辑是一样的,只是用xml的方法,要把这种逻辑写出来,告诉spring框架去执行. 例子:这里的例子和上一篇的例子一样.换成xml方式 / ...

  10. 【Win 10 应用开发】Sqlite 数据库的简单用法

    如果老周没记错的话,园子里曾经有朋友写过如何在 UWP 项目中使用 Sqlite数据库的文章.目前我们都是使用第三方封装的库,将来,SDK会加入对 Sqlite 的支持. 尽管目前 UWP-RT 库中 ...