FlexSlider是一款功能强大的响应式jQuery幻灯片插件。该幻灯片插件可以制作为带缩略图模式,旋转木马模式等。它可以自适应屏幕大小,并可以制作多种幻灯片过渡特效。它的兼容性强,可以兼容IE7+的现代浏览器。它的特点还有:

支持多种幻灯片模式

支持iOS滑动手势

支持回调函数API

支持多种CSS3动画过渡效果

有额外的旋转木马选项

大量的配置参数

多种主题

使用方法

HTML结构

该幻灯片最基本的HTML结构如下:

初始化插件

在页面加载完毕之后,可以通过下面的方法来初始化该FlexSlider幻灯片插件。

$('.flexslider').flexslider({

animation: "slide",

start: function(slider){

$('body').removeClass('loading');

}

});

配置参数

namespace:namespace是有插件产生的元素的CSS名称的前缀。

默认值:"flex-"

接收值:String

...

提示:namespace也可以是一个空白符,这会去除掉前缀。

selector:用于选择幻灯片容器和slide的选择器。这个选择器必须是以下模式:'{container} > {slide}'。

默认值:".slides > li"

接收值:selector

// FlexSlider setup using custom selector

$(".slider").flexslider({

selector: ".tabs > .tab"

});

...
...

animation:slider的动画类型。目前只支持2种动画:fade和slide。

默认值:"fade"

接收值:"fade" 或 "slide"

你可以考虑在移动触摸设备中使用淡入淡出模式,下面的代码使用Modernizr来检测touch事件是否可用。

$(".flexslider").flexslider({

animation: Modernizr.touch ? "slide" : "fade"

});

easing:该参数允许使用jQuery easing。默认是由jQuery提供的“swing”和“linear”,你可以通过引入jQuery Easing plugin来使用更多的动画过渡效果。注意,如果你选择一个不存在的easing效果,插件可能会崩溃。

默认值:"swing"

接收值:String

注意:你需要设置useCCS: false来强制在支持translate3d的浏览器执行过渡动画。

direction:幻灯片的方向。支持"horizontal"和"vertical"2种方向。在淡入淡出效果中不能使用这个参数。

默认值:"horizontal"

接收值:horizontal或vertical

注意:垂直幻灯片的图片高度必须相等。

reverse:该参数决定幻灯片是从左向右运动还是从右向左运动。

默认值:"false"

接收值:Boolean

animationLoop:幻灯片是否无缝无限循环。如果设置为false,directionNav将会在结尾处添加.flex-disableclass。

默认值:"true"

接收值:Boolean

smoothHeight:该参数允许在不同高度的图片之间平滑过渡。在水平淡入淡出幻灯片上无效果。

默认值:"false"

接收值:Boolean

startAt:幻灯片的开始位置。0是第一张幻灯片。

默认值:0

接收值:Number

slideshow:幻灯片是否自动播放。

默认值:true

接收值:Boolean

slideshowSpeed:幻灯片的切换速度,单位毫秒。

默认值:600

接收值:Number

提示:如果你使用一个很慢的速度(>=700),可以考虑在移动触摸设备上使用一个较快的速度,这会使动画过渡更加平滑。$(".flexslider").flexslider({

animation: "slide",

animationSpeed: Modernizr.touch ? 400 : 1000

});

initDelay:初始化延迟时间,单位毫秒。

默认值:0

接收值:Number

randomize:在幻灯片初始化时打乱图片的顺序。

默认值:false

接收值:Boolean

pauseOnAction:pauseOnAction是幻灯片自动播放模式的二级控制。它会在鼠标滑过幻灯片时暂停播放,离开时重新播放。

默认值:false

接收值:Boolean

useCSS:useCSS决定在CSS transitions可用时是否使用它们。

默认值:true

接收值:Boolean

touch:允许幻灯片使用touch-swipe事件。

默认值:true

接收值:Boolean

video:使用视频。Translate3D在视频上使用时会有一些bug,所以开启该参数会禁用CSS transitions,而改用 jQuery transitions。

默认值:false

接收值:Boolean

controlNav:用于动态创建幻灯片导航元素。在controlNav中传入thumbnails参数会动态创建缩略图导航。

默认值:true

接收值:Boolean或"thumbnails"

缩略图的结构如下:

手势控制幻灯片播放html,FlexSlider|功能强大的响应式jQuery幻灯片插件相关推荐

  1. html5下拉幻灯片插件,支持多种动画特效的响应式jQuery幻灯片插件

    jcSlider是一款效果非常炫酷的支持多种动画特效的响应式jQuery幻灯片插件.该幻灯片插件的文件体积效果,支持各种HTML元素,并且可以使用内置的60多种CSS3动画效果来制作幻灯片的过渡动画. ...

  2. [MAUI 项目实战] 手势控制音乐播放器(一): 概述与架构

    这是一篇系列博文.请关注我,学习更多.NET MAUI开发知识! [MAUI 项目实战] 手势控制音乐播放器(一): 概述与架构 [MAUI 项目实战] 手势控制音乐播放器(二): 手势交互 [MAU ...

  3. python基于yolov3实现的手势控制音乐播放器

    python基于yolov3实现的手势控制音乐播放器 效果演示 总体框架 手势识别模块 音乐播放器模块 一个小总结吧 效果演示 话不多说,先上最后的成品展示. python基于yolov3实现的手势控 ...

  4. cropper简单且功能强大的图片剪裁jQuery插件

    cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. cropper提供了大量的参数 ...

  5. 在线音乐播放器 html,html5实现在线响应式音乐播放器

    大概很早的时候就有想法做一个音乐播放器玩玩,以前可能还考虑过做APP,大一的时候第一个html的静态页面也是做的音乐网站,想想,大概小时候比较喜欢音乐吧.然而,现在入了前端大坑,就用h5做一个耍耍好了 ...

  6. html5自适应性响应式banner幻灯片切换,html5 css3 bootstrap响应式幻灯片带进度条的图片切换效果代码...

    特效描述:html5 css3 bootstrap 响应式幻灯片 带进度条 图片切换效果.jquery+css3带倒计时的全屏幻灯片插件Bootslider.js 代码结构 1. 引入CSS 2. 引 ...

  7. [MAUI 项目实战] 手势控制音乐播放器(四):圆形进度条

    文章目录 关于图形绘制 创建自定义控件 使用控件 创建专辑封面 项目地址 我们将绘制一个圆形的音乐播放控件,它包含一个圆形的进度条.专辑页面和播放按钮. 关于图形绘制 使用MAUI的绘制功能,需要Mi ...

  8. [MAUI 项目实战] 手势控制音乐播放器(二): 手势交互

    文章目录 原理 交互实现 容器控件 手势开始 手势运行 手势结束 使用控件 拖拽物 创建pit集合 项目地址 原理 定义一个拖拽物,和它拖拽的目标,拖拽物可以理解为一个平底锅(pan),拖拽目标是一个 ...

  9. android幻灯片播放过程中,锁屏,在按锁屏键幻灯片仍在放映,为何windows10锁屏设置幻灯片放映不能正常工作?...

    如果你觉得锁屏界面太过单调,可以将它的背景设置为幻灯片放映,并为它选择一个或多个相册.但有些朋友虽然这么设置了,windows10却并不听话,没有在锁屏界面播放幻灯片,阅读完本文希望能为你解决这个问题 ...

最新文章

  1. .asmx支持post请求或者get请求调用(WebService 因 URL 意外地以 结束,请求格式无法识别 的解决方法)...
  2. 实时SLAM的未来及深度学习与SLAM对比
  3. HDU 3037 Saving Beans (Lucas法则)
  4. 天梯赛 L1-027 出租 (20 分)
  5. IOTA 交易,确认和共识
  6. es6 Map、Set和Array.from()
  7. richTextBoxFontClass
  8. Python 找出1与100之间的全部“同构数”
  9. 不了解这些“高级货”,活该你面试当炮灰。。。【石杉的架构笔记】
  10. (2)Spring框架----IOC基础快速入门
  11. CentOS 7 GNOME经典桌面 拼音输入法设置
  12. 基于springboot宠物医院管理系统java源码
  13. QQ连连看单机版辅助制作全流程
  14. CardsMobile携手华为安全检测,打造俄罗斯一体化支付新体验
  15. Unknown column ‘id‘ in ‘field list‘ 【排错·sql】
  16. SurfaceView打造自定义时钟ClockView
  17. Oracle存储过程语法记录
  18. 为什么springcloud值得我们学习?
  19. 软件测试工程师笔试面试题带答案(一)
  20. 关于充电电池(AA型和AAA型)

热门文章

  1. 一分钟让你学会如何合并PDF文件
  2. 27.Python数据库操作(一)【内置数据库SQLite和ORM框架SQLAlchemy】
  3. Java是怎么解决可见性问题的
  4. RabbitMQ常见幂等性、可靠性、顺序性问题及解决方案
  5. Eclipse 报错A child container failed during start?
  6. access设计视图打不开_5、使用数据视图创建表(ACCESS图解操作系列)
  7. 【AltiumDesigner18】关于modified polygon的一种解决方式
  8. 扫雷游戏2023.4.3
  9. python相关职业-浅谈Python全栈开发工程师,让程序员都眼红的职业!
  10. Jsp+Servlet+JavaBean实现最基本的注册登陆功能