YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Downloads » jQuery EasyCarousel Plugin

jQuery EasyCarousel Plugin

Carousel 实例演示

Scroll 实例演示

特点简介

EasyCarousel Plugin 是 jQuery 写的又一个非常实用的 Carousel 插件。实现了常用了 Carousel 特效的功能:

  • 支持横向、纵向的滚动
  • 支持无缝循环滚动
  • 支持自定义显示页数
  • 支持自定义Easing动画特效
  • 支持自定义滚动距离
  • 支持Easing动画滚动时间间隔
  • 支持每屏之间的切换时间间隔
  • 支持tab标签导航切换(v1.0.26新增)

依赖的JavaScript

配置说明

$("#carousel").easyCarousel({
    // 滚动的区域 ID 选择器(可选)
    container: "#carousel-v-scroller",
    // Carousel 列表 ID 选择器(必选)
    carousel: '#carousel-photos',
    // 单个item 选择器的名称(可选)
    items: "li",
    // 上一组按钮选择器(必选)
    prevBtn: '#carousel-btn-prev',
    // 下一组按钮选择器(必选)
    nextBtn: '#carousel-btn-next',
    // 翻页按钮是否(可选)
    minMaxPageButtonDisabled: true,
    // 默认显示第几页(可选)
    defaultPage: 0,
    // 滚动一次的Item数量(可选)
    itemsPerStep: 0,
    // 滚动方向,默认纵向滚动(可选)
    scrollDirection: 'H',
    // 滚动一屏动画所有的时间(可选)
    animateSpeed: 500,
    // easing 动画特效(可选)
    // 可选的特效名称:swing,linear,easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic...
    // @see http://gsgd.co.uk/sandbox/jquery/easing/
    // @see http://easings.net/zh-cn/
    easing: "easeOutBounce",
    // 是否自动滚动(可选)
    autoScroll: true,
    // 循环播放的(前后翻页)方向
    playDirection: "back",
    // 美屏切换的时间间隔(可选)
    switchDuration: 4000,
    // 是否无间断连续滚动(可选)
    cycleScroll: true
});

Git获取地址: https://github.com/yaohaixiao/EasyCarousel.git
GitHub:https://github.com/yaohaixiao/EasyCarousel

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:jQuery EasyCarousel Plugin

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)