手势控制幻灯片播放html,FlexSlider|功能强大的响应式jQuery幻灯片插件
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幻灯片插件相关推荐
- html5下拉幻灯片插件,支持多种动画特效的响应式jQuery幻灯片插件
jcSlider是一款效果非常炫酷的支持多种动画特效的响应式jQuery幻灯片插件.该幻灯片插件的文件体积效果,支持各种HTML元素,并且可以使用内置的60多种CSS3动画效果来制作幻灯片的过渡动画. ...
- [MAUI 项目实战] 手势控制音乐播放器(一): 概述与架构
这是一篇系列博文.请关注我,学习更多.NET MAUI开发知识! [MAUI 项目实战] 手势控制音乐播放器(一): 概述与架构 [MAUI 项目实战] 手势控制音乐播放器(二): 手势交互 [MAU ...
- python基于yolov3实现的手势控制音乐播放器
python基于yolov3实现的手势控制音乐播放器 效果演示 总体框架 手势识别模块 音乐播放器模块 一个小总结吧 效果演示 话不多说,先上最后的成品展示. python基于yolov3实现的手势控 ...
- cropper简单且功能强大的图片剪裁jQuery插件
cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. cropper提供了大量的参数 ...
- 在线音乐播放器 html,html5实现在线响应式音乐播放器
大概很早的时候就有想法做一个音乐播放器玩玩,以前可能还考虑过做APP,大一的时候第一个html的静态页面也是做的音乐网站,想想,大概小时候比较喜欢音乐吧.然而,现在入了前端大坑,就用h5做一个耍耍好了 ...
- html5自适应性响应式banner幻灯片切换,html5 css3 bootstrap响应式幻灯片带进度条的图片切换效果代码...
特效描述:html5 css3 bootstrap 响应式幻灯片 带进度条 图片切换效果.jquery+css3带倒计时的全屏幻灯片插件Bootslider.js 代码结构 1. 引入CSS 2. 引 ...
- [MAUI 项目实战] 手势控制音乐播放器(四):圆形进度条
文章目录 关于图形绘制 创建自定义控件 使用控件 创建专辑封面 项目地址 我们将绘制一个圆形的音乐播放控件,它包含一个圆形的进度条.专辑页面和播放按钮. 关于图形绘制 使用MAUI的绘制功能,需要Mi ...
- [MAUI 项目实战] 手势控制音乐播放器(二): 手势交互
文章目录 原理 交互实现 容器控件 手势开始 手势运行 手势结束 使用控件 拖拽物 创建pit集合 项目地址 原理 定义一个拖拽物,和它拖拽的目标,拖拽物可以理解为一个平底锅(pan),拖拽目标是一个 ...
- android幻灯片播放过程中,锁屏,在按锁屏键幻灯片仍在放映,为何windows10锁屏设置幻灯片放映不能正常工作?...
如果你觉得锁屏界面太过单调,可以将它的背景设置为幻灯片放映,并为它选择一个或多个相册.但有些朋友虽然这么设置了,windows10却并不听话,没有在锁屏界面播放幻灯片,阅读完本文希望能为你解决这个问题 ...
最新文章
- .asmx支持post请求或者get请求调用(WebService 因 URL 意外地以 结束,请求格式无法识别 的解决方法)...
- 实时SLAM的未来及深度学习与SLAM对比
- HDU 3037 Saving Beans (Lucas法则)
- 天梯赛 L1-027 出租 (20 分)
- IOTA 交易,确认和共识
- es6 Map、Set和Array.from()
- richTextBoxFontClass
- Python 找出1与100之间的全部“同构数”
- 不了解这些“高级货”,活该你面试当炮灰。。。【石杉的架构笔记】
- (2)Spring框架----IOC基础快速入门
- CentOS 7 GNOME经典桌面 拼音输入法设置
- 基于springboot宠物医院管理系统java源码
- QQ连连看单机版辅助制作全流程
- CardsMobile携手华为安全检测,打造俄罗斯一体化支付新体验
- Unknown column ‘id‘ in ‘field list‘ 【排错·sql】
- SurfaceView打造自定义时钟ClockView
- Oracle存储过程语法记录
- 为什么springcloud值得我们学习?
- 软件测试工程师笔试面试题带答案(一)
- 关于充电电池(AA型和AAA型)
热门文章
- 一分钟让你学会如何合并PDF文件
- 27.Python数据库操作(一)【内置数据库SQLite和ORM框架SQLAlchemy】
- Java是怎么解决可见性问题的
- RabbitMQ常见幂等性、可靠性、顺序性问题及解决方案
- Eclipse 报错A child container failed during start?
- access设计视图打不开_5、使用数据视图创建表(ACCESS图解操作系列)
- 【AltiumDesigner18】关于modified polygon的一种解决方式
- 扫雷游戏2023.4.3
- python相关职业-浅谈Python全栈开发工程师,让程序员都眼红的职业!
- Jsp+Servlet+JavaBean实现最基本的注册登陆功能