jQuery.easyCarousel 插件(version 1.7.3 更新)

yaohaixiao

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>

mojiezuo3

顶！ 还托管到GitHub了 啊。
我平时也用我自己写的，灵活度也行

millionfor

楼主在我眼里一直是个高手样存在 可是为嘛写JQ呢 写原生吧 哈

yaohaixiao

mojiezuo3 发表于 2014-6-26 13:28
顶！ 还托管到GitHub了 啊。
我平时也用我自己写的，灵活度也行

代码好管理一些啊

yaohaixiao

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

好吧，有时间我整个原生的吧

yaohaixiao

我暂时还没有添加动态生成的支持，不过稍后会加上的

xmlovedoudou

不错。我也写了个轮播放在github了。不过不是一次轮播多个图片的。
就是一张一张轮播。
给楼主去github点赞去！

yaohaixiao

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

谢谢支持啊，发现什么问题也请及时跟我反馈啊

yaohaixiao

tab 导航在循环滚动状态时，tab 跨多个tab导航的动画过渡需要优化，现在有比较明显的顿挫感

yaohaixiao

1.7.3 版更新

jikeytang

确实比较实用，给力。已收藏。