- UID
- 281860
- 在线时间
- 小时
- 积分
- 2139
- 帖子
- 离线
- 18646 天
- 注册时间
- 2006-8-7
|
本帖最后由 yaohaixiao 于 2014-7-8 22:30 编辑
GitHub地址:https://github.com/yaohaixiao/EasyCarousel
<h2>easyCarousel Plugin 简介</h2>
<p>easyCarousel Plugin 是 jQuery 写的又一个非常实用的 Carousel 插件。用来展示一组(列表)内容横向或者纵向的滚动。easyCarousel 功能齐全、浏览器兼容性好、扩展性好。它可以用于任何类似 Carousel 结构的 HTML 代码。</p>
<h3>程序特点</h3>
<ol>
<li>easyCarousel 可以自定义滚动方向(横向或者纵向)</li>
<li>easyCarousel 可自定义是否自动播放</li>
<li>easyCarousel 可以自定义两次翻页之间的停顿时间</li>
<li>easyCarousel 可以自定义每次翻页滚动时的动画过渡时间</li>
<li>easyCarousel 可以设置丰富的翻页滚动动画特效(动画特效依赖:jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/)</li>
<li>easyCarousel 可自定义自动播放时的翻页方向(向下翻页或者向上翻页)</li>
<li>easyCarousel 可以实现连续的无缝循环播放</li>
<li>easyCarousel 可以自定义上下翻页按钮是否在最大最小页面时不可用</li>
<li>easyCarousel 可以设置默认显示第几屏的内容</li>
<li>easyCarousel 可以设置每次滚动时的滚动距离</li>
<li>easyCarousel 支持内容分页导航</li>
<li>easyCarousel 分页导航按钮支持 Tab/Shift + Tab 键操作上下翻页</li>
<li>easyCarousel 支持动态加载数据</li>
<li>easyCarousel 可以灵活的设置配置项,支持随时重新启动程序</li>
</ol>
<h3>配置方法</h3>
<p>easyCarousel 的配置非常灵活,可以在开始时一次性配置好例如:</p>
<pre class="trs-code">
$("#carousel-album").easyCarousel({
// 滚动的区域 ID 选择器或者 HTMLElement DOM 节点(可选)
// 默认值:#carousel-container
container: "#carousel-container",
// carousel 列表 ID 选择器或者 HTMLElement DOM 节点(可选)
// 默认值:#carousel-list
carousel: "#carousel-list",
// 单个item 选择器的名称(可选)
// 默认值:li
item: "li",
// 向上翻页按钮选择器或者 HTMLElement DOM 节点(可选)
// 默认值:#carousel-prev-btn
prevBtn: "#carousel-prev-btn",
// 向下翻页按钮选择器或者 HTMLElement DOM 节点(可选)
// 默认值:#carousel-next-btn
nextBtn: "#carousel-next-btn",
// 滚动方向(可选)
// 默认值:H - 横向滚动
// V - 纵向滚动
playDirection: "H",
// 是否自动播放(可选)
// 默认值:false - 不自动播放
// true - 自动播放
isAutoPlay: true,
// (自动播放时)切换完一页后,切换到下一页的时间间隔(可选)
// 默认值:3000 - 等待3秒,然后切换
pageSwitchDelay: 3000,
// 动画滚动一屏所用的时间(可选)
// 默认值:500 - 切换一屏动画时间为半秒
animateDuration: 500,
// 滚动时的 easing 动画特效名称(可选)
// 默认值:swing
// 其他可选值:linear,easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic...
// @see http://gsgd.co.uk/sandbox/jquery/easing/
// @see http://easings.net/zh-cn/
easing: "swing",
// 自动播放时,滚动翻页的方向(可选)
// 默认值:forward - 向下翻页
// back - 向回翻页
pageDirection: "back",
// 是否无缝循环滚动,或者来回滚动(可选)
// 默认值:false - 来回滚动
// true - 无缝循环滚动
isCyclePlay: false,
// (来回滚动时)到第一页或者最后一页翻页按钮是否(可选)
// 默认值:false - 按钮一直可用,页面循环来回滚动;
// true - 在第一页,向上翻页按钮不可用;
// 在最后一页,向下翻页按钮不可用;
isButtonAvailable: false,
// 默认显示第几页(可选)
// 默认值:0
defaultPage: 0,
// 切换一次的 Item 数量(可选)
// 默认值:0 - 自动计算,根据展示区域高度或宽度来计算每屏可显示的 Item 数量
itemsPerStep: 0,
// 页面开始切换时,预先要执行的事情(可选)
// 默认值:null(函数:function)
beforeSwitch: function(){
alert("Carousel 要开始滚动了哦!");
},
// 切换玩一页后,要执行的事情(可选)
// 默认值:null(函数:function)
afterSwitched: function(){
alert("Carousel 滚动已经滚动完一页了哦!");
},
// 是否自动生成分页导航
// 默认值:false - 不生成分页导航
// true - 自动生成分页导航
hasPagination: false,
// ajax 动态加载数据
ajax: {
// ajax.url - 请求路径(必选)
url: TXT.EMPTY,
// ajax.itemInnerHTML - item(li)中显示内容(innerHTML)的模板(可选)
// @see TEMPLATE.ITEM_INNER_HTML
itemInnerHTML: TEMPLATE.ITEM_INNER_HTML,
// $.ajax() 方法的标准参数 beforeSend,发送请求前执行的函数(可选)
// @see http://api.jquery.com/jQuery.ajax/
beforeSend: null,
// $.ajax() 方法的标准参数 complete,请求执行成功后要执行的函数(可选)
// @see http://api.jquery.com/jQuery.ajax/
complete: null,
// $.ajax() 方法的标准参数 error,请求发生错误要执行的函数(可选)
// @see http://api.jquery.com/jQuery.ajax/
error: null
}
});
</pre>
<p>也可以通过程序提供的 <strong>option()</strong> 方法设置,例如:</p>
<pre class="trs-code">
$("#carousel").easyCarousel().option({
isAutoPlay: "true",
isCyclePlay: "true"
}).reload();
</pre>
<p>不过要注意,使用 easyCarousel 提供的 <strong>option()</strong> 方法时,都需要最后使用 <strtong>reload()</strtong> 方法来重新初始化配置。当然,我们也可以使用 reload() 方法来直接重置或者添加新的配置项之前设置好的配置信息,例如:</p>
<pre class="trs-code">
$("#carousel").easyCarousel({
isAutoPlay: false,
isCyclePlay: true
}).reload({
// 重置配置
isAutoPlay: true,
isCyclePlay: false,
// 新增配置
hasPagination: true,
pageDirection: "back"
});
</pre>
<p>或者混合着使用:</p>
<pre class="trs-code">
$("#carousel").easyCarousel({
isAutoPlay: false,
isCyclePlay: true
}).option({
defaultPage: 2,
itemsPerPage: 3
}).reload({
// 重置配置
isAutoPlay: true,
isCyclePlay: false,
// 新增配置
hasPagination: true,
pageDirection: "back"
});
</pre>
<p>如大家所见,easyCarousel 提供非常丰富的功能和非常灵活的配置方法。</p>
<h3>依赖的JavaScript库</h3>
<ul>
<li>jQuery (v1.7.1) - <a href="http://www.jquery.com/">http://www.jquery.com/</a></li>
<li>jQuery Easing Plugin (v1.3) - <a href="http://gsgd.co.uk/sandbox/jquery/easing/">http://gsgd.co.uk/sandbox/jquery/easing/</a></li>
</ul>
<h2>实例演示</h2>
<ul>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/normal-horizontal-carousel.html">普通的横向滚动 来回滚动(默认)</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/normal-horizontal-buttons-disabled-carousel.html">普通的横向滚动 最大最小页按钮不可用</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/normal-horizontal-default-page-carousel.html">普通的横向滚动 指定默认的显示页面</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/normal-horizontal-easing-carousel.html">普通的横向滚动 自定义 easing 切换动画</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/normal-horizontal-auto-play-carousel.html">普通的横向滚动 自动播放</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/normal-horizontal-auto-play-back-carousel.html">普通的横向滚动 向上翻页 自动播放</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/normal-horizontal-items-per-step-carousel.html">普通的横向滚动 指定一次滚动的距离</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/normal-horizontal-animate-duration-carousel.html">普通的横向滚动 指定滚动一屏的时间</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/normal-horizontal-switch-delay-carousel.html">普通的横向滚动 自动滚动 指定滚动到下一屏的等待时间</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/normal-horizontal-has-pagination-carousel.html">普通的横向滚动 带分页 Tabs 导航</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/normal-horizontal-reload-carousel.html">普通的横向滚动 来回滚动,reload() 自动播放</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/cycle-horizontal-carousel.html">横向无缝循环滚动</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/cycle-horizontal-full-functions-carousel.html">横向无缝循环滚动 全部配置</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/cycle-horizontal-album-carousel.html">横向无缝循环滚动 相册效果</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/cycle-horizontal-ajax-load-album-carousel.html">横向无缝循环滚动 AJAX动态创建相册</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/normal-vertical-full-functions-carousel.html">纵向无缝循环滚动 全部配置</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/cycle-horizontal-scroll.html">循环无缝滚动 自动横向滚动</a></li>
<li><a href="http://www.yaohaixiao.com/easy-carousel/examples/cycle-vertical-scroll.html">循环无缝滚动 自动纵向滚动</a></li>
</ul>
<h2>API 文档</h2>
<p>查询详细的 API 文档请访问:<a href="http://www.yaohaixiao.com/easy-carousel/api-docs/">http://www.yaohaixiao.com/easy-carousel/api-docs/</a></p>
<h2>Copyright</h2>
<p>Copyright (c) 2014 Haixiao Yao. All right reserved. </p>
<h2>License</h2>
<p>Licensed under the MIT & LGPL license.</p> |
|