flexslider 轮播图片

FlexSlider

一个很棒的，响应能力强的jQuery滑块工具包。

简单的语义标记
所有主要浏览器均支持
水平/垂直滑动和淡入淡出动画
多个滑杆支持，回调API等
硬件加速的触摸滑动支持
自定义导航选项
与最新版本的jQuery兼容

通过3个简单的步骤开始使用FlexSlider！

步骤1 – 加载js、css文件

<!-- Place somewhere in the <head> of your document -->
<link href="//cdn.bootcss.com/flexslider/2.6.3/flexslider.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdn.bootcss.com/flexslider/2.6.3/jquery.flexslider-min.js"></script>

步骤2 – 添加标记

FlexSlider标记简单明了。首先，从一个包含元素开始，在此示例中为<div class =“ flexslider”>。然后，创建一个<ul class =“ slides”>。使用此类非常重要，因为滑块专门针对该类。将图像和您想要的其他任何内容放入每个<li>中，即可开始滚动。


<!-- Place somewhere in the <body> of your page -->
<div class="flexslider"><ul class="slides"><li><img src="slide1.jpg" /></li><li><img src="slide2.jpg" /></li><li><img src="slide3.jpg" /></li></ul>
</div>

步骤3 – 接通滚动块

最后，将以下几行Javascript添加到文档的<head>中，位于步骤1的链接下方。需要$（window）.load（）来确保在初始化插件之前加载页面的内容。

<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">$(window).load(function() {$('.flexslider').flexslider({animation: "fade",              //图片变换方式：淡入淡出或者滑动slideDirection: "horizontal",   //图片设置为滑动式时的滑动方向：左右或者上下slideshow: true,                //载入页面时，是否自动播放slideshowSpeed: 7000,           //自动播放速度毫秒animationDuration: 600,         //内容切换时间touch:              //是否支持触摸滑动directionNav: true,             //是否显示左右控制按钮controlNav: true,               //是否显示控制菜单keyboardNav: true,              //键盘左右方向键控制图片滑动mousewheel: false,              //鼠标滚轮控制制图片滑动minItems:1                  //一次最少展示滑动内容的单元个数    maxItems:0                   //一次最多展示滑动内容的单元个数    move:0              //一次滑动的单元个数                    prevText: "Previous",           //String:  上一项的文字nextText: "Next",               //String:  下一项的文字pausePlay: false,               //Boolean: 是否显示播放暂停按钮pauseText: 'Pause',             //String:  暂停文字playText: 'Play',               //String: 播放文字randomize: false,               //Boolean: 是否随机幻灯片slideToStart: 0,                //Integer:  初始化第一次显示图片位置animationLoop: true,            //是否循环滚动pauseOnAction: true,            //Boolean: Pause the slideshow when interacting  with control elements, highly recommended.pauseOnHover: false,            //鼠标滑向滚动内容时，是否暂停滚动pauseOnHover: false,           //鼠标糊上去是否暂停controlsContainer: "",          //Selector:  be taken.manualControls: "",             //自定义控制导航manualControlEvent:"",          //String:自定义导航控制触发事件:默认是click,可以设定hoverstart: function(){},            //加载第一页触发before: function(){},           //每个滚动动画开始时异步触发after: function(){},            //每个滚动动画结束时触发end: function(){}               //滚动到最后一页时异步触发});});
</script>

参数介绍

属性	默认	描述
namespace	“flex-”	String 前缀字符串，附加到插件生成的所有元素的类中。
selector	“.slides > li”	Selector必须匹配一个简单的模式。’{container} > {slide}’。
animation	“fade”	String控制动画类型"fade"或"slide"。
easing	“swing”	String 确定jQuery过渡中使用的缓动方法。
direction	“horizontal”	String控制动画方向，“horizontal"或"vertical”
reverse	false	Boolean 反转动画方向。
animationLoop	true	Boolean 为滑块提供无缝的无限循环。
smoothHeight	false	Boolean 平滑地动画化滑块的高度，以适应不同高度的幻灯片。
startAt	0	Number 滑块的起始幻灯片，以数组表示法。
slideshow	true	Boolean 设置幻灯片放映以使滑块自动动画。
slideshowSpeed	7000	Number 设置幻灯片循环播放的速度，以毫秒为单位
animationSpeed	600	Number 设置动画的速度，以毫秒为单位
initDelay	0	Number 设置初始化延迟（以毫秒为单位）
randomize	false	Boolean 随机加载幻灯片顺序
pauseOnAction	true	Boolean 与控件元素进行交互时，请暂停幻灯片放映。
pauseOnHover	false	Boolean 将鼠标悬停在滑块上时暂停幻灯片放映，然后不再悬停时继续播放。
useCSS	true	Boolean Slider将使用CSS3过渡（如果有）
touch	true	Boolean 允许在启用的设备上滑动滑动浏览滑块
video	false	Boolean 将阻止使用CSS3 3D变换，避免出现图形故障
controlNav	true	Boolean 为每个幻灯片的分页控制创建导航。
customDirectionNav	“”	jQuery Object/Selector 自定义导航标记适用的容器。
directionNav	true	Boolean 创建上一个/下一个箭头导航。
prevText	“Previous”	String设置“上一个”directionNav项目的文本
nextText	“Next”	String设置“下一个”directionNav项目的文本
keyboard	true	Boolean 允许通过键盘的向左/向右键浏览滑块。
multipleKeyboard	false	Boolean 允许键盘导航影响多个滑块。
mousewheel	false	Boolean （相关性）允许通过鼠标滚轮浏览滑块
pausePlay	false	Boolean 创建暂停/播放元素以控制滑块的幻灯片显示。
pauseText	“Pause”	String设置“暂停”pausePlay项的文本
playText	“Play”	String设置“播放”pausePlay项的文本
controlsContainer	“”	jQuery Object/Selector 容器中应附加导航元素。
manualControls	“”	jQuery Object/Selector定义用于代替动态元素的元素controlNav。
sync	“”	Selector 与另一个滑块镜像在此滑块上执行的操作。
asNavFor	“”	Selector 将滑块变成另一个滑块的缩略图导航。
itemWidth	0	Number 各个轮播项目的箱型宽度，包括水平边框和填充。
itemMargin	0	Number 轮播项目之间的保证金。
minItems	0	Number 可见的轮播项目的最小数量。
maxItems	0	Number 可见轮播项目的最大数量。
move	0	Number 动画中应移动的轮播项目数。
start	empty	Function 当滑块加载第一张幻灯片时触发。
before	empty	Function 与每个滑块动画异步触发。
after	empty	Function 在每个滑块动画完成后触发。
end	empty	Function 当滑块到达最后一张幻灯片（异步）时触发。
added	empty	Function 添加幻灯片后触发。
removed	empty	Function 移除幻灯片后触发。
rtl	false	Boolean 在滑块中支持RTL功能。
isFirefox	false	Boolean 测试是否正在使用Firefox浏览器。

flexslider 轮播图片相关推荐

java 图片手动切换_JavaScript学习案例之手动切换轮播图片
javascript学习案例之手动切换轮播图片效果图: 思路: 1.先做界面 1.1制作按钮及点击触发事件 1.2引入一张图片 2.书写css 2.1跳转p盒子的布局(宽.高.边框线.水平居中.文字 ...
swiper高度自适应_微信小程序之swiper轮播图片高度自适应
微信小程序中使用swiper组件可以实现图片轮播效果,但是默认swiper高度是固定的150px,如果项目中图片大于固定高度就会被隐藏,所以本篇文章要实现轮播图片的高度自适应. 效果图: swiper ...
Html之实例练习（轮播图片、放大镜效果、面板拖动）
文章目录一.轮播图片二.放大镜效果三.面板拖动本篇将简单演示一下HTML里的轮播图片.放大镜效果和面板拖动的实例,代码已经打包在文章开头,需要参考的请自行下载一.轮播图片 1.效果图 2.J ...
vue-awesome-swiper实现轮播图片
前言最近在学习Node.js (Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台时,学习到第三章 3.7-首页顶部轮播图片(vue-swipp ...
点击轮播图片，链接跳转错误
<#if (InfoList?size > 0)><#list InfoList as newsInfo><li class="slider-li1&qu ...
关于element-ui中轮播图手动切换轮播图片
文章目录前言一.关于element-ui中轮播图手动切换轮播图片二.解决方案 1.查看element-ui中Carousel 走马灯组件的方法 2.解决方法结尾前言在开发过程中发现项目中轮 ...
Bootstrap Slider轮播图片样式控制
提示:页面样式参考如下,模板案例下载 <div class="position-relative slider3"><div class="slider ...
el轮播图片image单张图比例缩放及多张图宽度固定高度等比例自适应展示；
开发过程中xx产品强烈需要轮播图的布局不固定, 单张等比例缩放展示,多张图取最高高度自适应展示:通过修改图片img 父级盒子容器宽高固定图片高度: 单张:1.方图 (宽高比例 ± 15% ) 2 . ...
【用HTML+CSS实现简单的轮播图片效果】
本文主要从两种方式上实现轮播图片效果方法一 ***================================================================== 本方法为渐变轮 ...