文档章节

amaezui 轮播的属性

佳炜
 佳炜
发布于 2016/06/12 20:35
字数 600
阅读 10
收藏 0
{
  animation: "slide",             // String: ["fade"|"slide"],动画效果
  easing: "swing",                // String: 滚动动画计时函数
  direction: "horizontal",        // String: 滚动方向 ["horizontal"|"vertical"]
  reverse: false,                 // Boolean: 翻转 slide 运动方向
  animationLoop: true,            // Boolean: 是否循环播放
  smoothHeight: false,            // Boolean: 当 slide 图片比例不一样时
                                  // "true": 父类自动适应图片高度
                                  // "false": 不自动适应,父类高度为图片的最高高度,默认为false
  startAt: 0,                     // Integer: 开始播放的 slide,从 0 开始计数
  slideshow: true,                // Boolean: 是否自动播放
  slideshowSpeed: 5000,           // Integer: ms 滚动间隔时间
  animationSpeed: 600,            // Integer: ms 动画滚动速度
  initDelay: 0,                   // Integer: ms 首次执行动画的延迟
  randomize: false,               // Boolean: 是否随机 slide 顺序
  // Usability features
  pauseOnAction: true,            // Boolean: 用户操作时停止自动播放
  pauseOnHover: false,            // Boolean: 悬停时暂停自动播放
  useCSS: true,                   // Boolean: 是否使用 css3 transition
  touch: true,                    // Boolean: 允许触摸屏触摸滑动滑块
  video: false,                   // Boolean: 使用视频的 slider,防止 CSS3 3D 变换毛刺
  // Primary Controls
  controlNav: true,               // Boolean: 是否创建控制点
  directionNav: true,             // Boolean: 是否创建上/下一个按钮(previous/next)
  prevText: "Previous",           // String: 上一个按钮文字
  nextText: "Next",               // String: 下一个按钮文字
  // Secondary Navigation
  keyboard: true,                 // Boolean: 是否开启键盘左(←)右(→)控制
  multipleKeyboard: false,        // Boolean: 是否允许键盘控制多个 slide
  mousewheel: true,               // Boolean: 是否开启鼠标滚轮控制
  pausePlay: false,               // Boolean: 是否创建暂停与播放按钮
  pauseText: 'Pause',             // String: 暂停按钮文字
  playText: 'Play',               // String: 播放按钮文字
  // Special properties
  controlsContainer: "",          // jQuery Object/Selector
  manualControls: "",             // jQuery Object/Selector 自定义控制 slider 的元素,
                                  // 如 "#tabs-nav li img",导航数量和 slide 数量一样
  sync: "",                       // Selector: 关联 slide 与 slide 之间的操作。
  asNavFor: "",                   // Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
  // Carousel Options
  itemWidth: 0,                   // Integer: slide 宽度,多个同时滚动时设置
  itemMargin: 0,                  // Integer: slide 间距
  minItems: 1,                    // Integer: 最少显示 slide 数, 与 `itemWidth` 相关
  maxItems: 0,                    // Integer: 最多显示 slide 数, 与 `itemWidth` 相关
  move: 0,                        // Integer: 一次滚动移动的 slide 数量,0 - 滚动可见的 slide
  // Callback API
  start: function(){},            // Callback: function(slider) - 初始化完成的回调
  before: function(){},           // Callback: function(slider) - 每次滚动开始前的回调
  after: function(){},            // Callback: function(slider) - 每次滚动完成后的回调
  end: function(){},              // Callback: function(slider) - 执行到最后一个 slide 的回调
  added: function(){},            // Callback: function(slider) - slide 添加时触发
  removed: function(){}           // Callback: function(slider) - slide 被移除时触发
  // Amaze UI 扩展参数
  playAfterPaused: null           // Integer: ms 用户停止操作多长时间以后重新开始自动播放
}

 

© 著作权归作者所有

共有 人打赏支持
佳炜
粉丝 6
博文 10
码字总数 2779
作品 0
嘉兴
关于图片轮播图的一个简单实例 以及实例中发现问题

1.最近在学习JS的过程中,为了巩固水平做了一个简单的轮播图,以及在做的过程中发现一些问题(未解决!希望可以有大佬可以解释这个问题) 2.代码如下:

前端二弟
05/17
0
0
4.22、Bootstrap V4自学之路-----内容---轮播

示例 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="......

Asktao
2016/03/25
105
0
手把手教你用原生JavaScript造轮子(2)——轮播图

通过上一篇文章的学习,我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图,希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Let's ...

csdoker
08/12
0
0
前端框架Vue(14)—— 利用 vue 过渡效果(transition)+定时器 实现轮播图通用组件

序论: 效果: 1、功能分析。 从上面的效果图中看,有四个基本功能: 2、场景介绍、分析。 环境是 vue 组件的形式,轮播图模块是以组件的形式,内嵌在父组件中。这样的好处是轮播图功能,低耦...

docallen
2017/08/24
0
0
微信小程序(五):轮播

本文讲轮播的实现,部分内容来源于官方文档,增加了笔者实际操作中的一些问题与经验。 本文基于微信小程序公测版,IDE:微信开发者工具 0.10.102800 组件 swiper 微信小程序原生就提供了轮播...

u010635353
2016/11/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud Gateway真的有那么差吗?

前言 Spring Cloud从一开始最受大家质疑的就是网关性能,那是由于Spring Cloud最初选择了使用Netflix几年前开源的Zuul作为基础,而高性能版的Zuul 2在经过了多次跳票之后,对于Spring这样的整...

Java小铺
34分钟前
1
0
SpringBoot远程调试,远程debug你的线上项目

开发环境中代码出错了,可以利用IDE的debug功能来进行调试。那线上环境出错呢? 一、假设我们的项目是部署在tomcat中,那我们就需要对tomcat进行一定对配置,配置如下。 1. windows系统中,找...

nonnetta
39分钟前
0
0
JAVA秒杀优化方向

秒杀优化方向 将请求尽量拦截在系统上游:传统秒杀系统之所以挂,请求都压倒了后端数据层,数据读写锁冲突严重,几乎所有请求都超时,流量虽大,下单成功的有效流量甚小,我们可以通过限流、...

小贱是个程序员
47分钟前
0
0
C# 统计字符串中大写字母和小写字母的个数

static void Main() { int count1 = 0; int count2 = 0; Console.WriteLine("请输入字符串"); string str = Convert.ToString(Consol......

熊二的爸爸是谁
49分钟前
0
0
分布式服务框架之远程通讯技术及原理分析

在分布式服务框架中,一个最基础的问题就是远程服务是怎么通讯的,在Java领域中有很多可实现远程通讯的技术,例如:RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB和JMS等,这些名词之间到底是...

老道士
55分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部