[代码样式]jQuery幻灯片插件Orbit

[代码样式]jQuery幻灯片插件Orbit

简介

Orbit 是一个基于 jQuery 的幻灯片插件,它的功能虽然不如 FlexSlider 强大,但常见的功能都有,并且它还具有计时器这个特别的功能。Orbit 具有以下功能特点:

  • 标签简单
  • 支持淡入淡出和水平/垂直滚动切换
  • 支持计时器
  • 支持左右箭头导航及项目导航
  • 支持显示初图片外的其他内容,如 HTML、视频等(演示)
  • 支持缩略图(演示)

Orbit 已经停止更新了,因为它已经被作者集成到一个快速的前端框架中——Foundation,它最后一个版本是2012年1月25日发布的 v1.3.0。但它仍然是一个非常优秀的幻灯片插件,你可以继续使用。

兼容性

Orbit 不兼容 IE6。

使用方法

以下介绍的是基本用法,以便快速入门。想要高级用法,可以查看下面的参数和演示。

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/orbit-thumbs.css">
<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.orbit.min.js"></script>

2、HTML

<div id="featured">
    <img src="https://www.dowebok.com/images/img1.jpg" alt="img1">
    <img src="https://www.dowebok.com/images/img2.jpg" alt="img2">
    <img src="https://www.dowebok.com/images/img3.jpg" alt="img3">
    <img src="https://www.dowebok.com/images/img4.jpg" alt="img4">
</div>

3、JavaScript

$(window).load(function() {
    $('#featured').orbit();
});

参数

以下参数基于 Orbit v1.3.0 版本。

参数 说明 默认值
animation 幻灯片切换方式,可选 fade(淡入淡出)、horizontal-slide, vertical-slide, horizontal-push、horizontal-push fade
animationSpeed 幻灯片切换动画时间,单位为毫秒 800
timer 是否显示计时器 true
advanceSpeed 幻灯片切换间隔,单位为毫秒 4000
pauseOnHover 鼠标悬停在上面是否暂停 false
startClockOnMouseOut 点击导航后是否暂停计时器,直到鼠标移开 false
startClockOnMouseOutAfter 与 startClockOnMouseOut 配合使用,鼠标移开后多久开始计时,单位为毫秒 1000
directionalNav 是否显示左右方向导航 true
captions 是否显示标题 true
captionAnimation 标题显示动画方式,可选 fade(淡入淡出)、slideOpen、none,需要 captions 为 true fade
captionAnimationSpeed 标题动画时间,单位为毫秒 800
bullets 是否显示项目导航 false
bulletThumbs 是否显示缩略图,需要 bullets 为 true false
bulletThumbLocation 缩略图的文件地址
afterSlideChange 幻灯片切换后的回调函数

Orbit 官方地址://zurb.com/playground/orbit-jquery-image-slider

隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]jQuery计时器插件TimeCircles

2020-10-27 14:47:27

脚本代码

[代码样式]shCircleLoader – jQuery Loading效果插件

2020-10-30 10:19:29

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索