flexslider 轮播图片

最新推荐文章于 2023-10-17 16:36:23 发布

Patrick Sun

最新推荐文章于 2023-10-17 16:36:23 发布

阅读量295

点赞数 1

分类专栏： javascripts 文章标签： javascript jquery

原文链接：https://woocommerce.com/flexslider/

版权

javascripts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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,可以设定hover
		  start: 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浏览器。

Patrick Sun

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flexslider 轮播图片

FlexSlider一个很棒的，响应能力强的jQuery滑块工具包。简单的语义标记所有主要浏览器均支持水平/垂直滑动和淡入淡出动画多个滑杆支持，回调API等硬件加速的触摸滑动支持自定义导航选项与最新版本的jQuery兼容通过3个简单的步骤开始使用FlexSlider！步骤1 – 加载js、css文件<link href="//cdn.boo
复制链接

扫一扫

专栏目录