找回密码
 注册

QQ登录

只需一步,快速开始

查看: 2873|回复: 10

[jquery] jQuery.easyCarousel 插件(version 1.7.3 更新)

[复制链接]
发表于 2014-6-26 12:55:33 | 显示全部楼层 |阅读模式
本帖最后由 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>

本帖被以下淘专辑推荐:

发表于 2014-6-26 13:28:56 | 显示全部楼层
顶! 还托管到GitHub了 啊。
我平时也用我自己写的,灵活度也行
回复 支持 反对

使用道具 举报

发表于 2014-6-26 14:20:48 | 显示全部楼层
楼主在我眼里一直是个高手样存在 可是为嘛写JQ呢 写原生吧 哈
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-6-26 14:41:34 | 显示全部楼层
mojiezuo3 发表于 2014-6-26 13:28
顶! 还托管到GitHub了 啊。
我平时也用我自己写的,灵活度也行

代码好管理一些啊
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-6-26 14:42:01 | 显示全部楼层
millionfor 发表于 2014-6-26 14:20
楼主在我眼里一直是个高手样存在 可是为嘛写JQ呢 写原生吧 哈

好吧,有时间我整个原生的吧
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-6-26 14:46:50 | 显示全部楼层
我暂时还没有添加动态生成的支持,不过稍后会加上的
回复 支持 反对

使用道具 举报

发表于 2014-6-26 15:01:33 | 显示全部楼层
不错。我也写了个轮播放在github了。不过不是一次轮播多个图片的。
就是一张一张轮播。
给楼主去github点赞去!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-6-26 15:09:32 | 显示全部楼层
xmlovedoudou 发表于 2014-6-26 15:01
不错。我也写了个轮播放在github了。不过不是一次轮播多个图片的。
就是一张一张轮播。
给楼主去github点 ...

谢谢支持啊,发现什么问题也请及时跟我反馈啊
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-6-27 17:52:28 | 显示全部楼层
tab 导航在循环滚动状态时,tab 跨多个tab导航的动画过渡需要优化,现在有比较明显的顿挫感
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-7-8 22:28:13 | 显示全部楼层
1.7.3 版更新
回复 支持 反对

使用道具 举报

发表于 2014-7-9 15:30:57 | 显示全部楼层
确实比较实用,给力。已收藏。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2021-1-19 20:25 , Processed in 0.063754 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表