信游平台登陆

注册 | 登录 | 网址 接待拜候八百站长

FlexSlider插件的利用体例及具体设置参数

2015/11/18 5:08:10 作者:站长日志 来历:收集 浏览:6985次

Flexslider是一款基于的jQuery内容转动插件。它能让你轻松的建立内容转动的结果,具备很是高的可定制性。开辟者能够利用Flexslider轻松建立各类图片轮播结果、核心图结果、图文混排转动结果。


Flexslider具备以下特征:

  • 撑持滑动和淡入淡出结果。

  • 撑持程度、垂直标的目的滑动。

  • 撑持键盘标的目的键节制。

  • 撑持触控滑动。

  • 撑持图文混排,撑持各类html元素。

  • 自顺应屏幕尺寸。

  • 可节制滑动单位个数。

  • 更多选项设置和回调函数。

HTML

起首在页面head部位载入jquery库文件和Flexslider插件,和Flexslider所需的根基css款式文件。

<link rel="stylesheet" type="text/css" href="flexslider.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js">/script>
<script type="text/javascript" src="jquery.flexslider-min.js"></script>

而后在body中插手以下HTML代码:

<div class="flexslider">
  <ul class="slides">
    <li><img src="images/s1.jpg" /></li>
    <li><img src="images/s2.jpg" /></li>
    <li><img src="images/s3.jpg" /></li>
    <li><img src="images/s4.jpg" /></li>
  </ul>
</div>

咱们利用了.flexslider来包含一切须要转动的内容元素,而后利用<ul class="slides">这个class很是关头,外部的转动内容都是针对.slides的,而后在<li>外部插手肆意html元素,包含图片和笔墨。

jQuery

挪用Flexslider插件很是简略,利用以下代码:

$(function() {
  $(".flexslider").flexslider();
});

而后预览网页结果,一个内容切换结果就实现了,固然想要更多特性化设置,flexslider供给了丰硕的选项设置装备摆设和回调函数相对能够知足大大都开辟者须要。

Flexslider选项设置

参数描写默许值
animation动画结果范例,有"fade":淡入淡出,"slide":滑动"fade"
easing内容切换时缓动结果,须要jquery easing插件撑持"swing"
direction内容转动标的目的,有"horizontal":程度标的目的 和"vertical":垂直标的目的"horizontal"
animationLoop是不是轮回转动true
startAt初始滑动时的肇端地位,定位从第几个起头滑动0
slideshow是不是主动滑动true
slideshowSpeed滑动内容展现时候(ms)7000
animationSpeed内容切换时候(ms)600
initDelay初始化时延时时候0
pauseOnHover鼠标滑向转动内容时,是不是停息转动false
touch是不是撑持触摸滑动true
directionNav是不是显现摆布标的目的箭头按钮true
keyboard是不是撑持键盘标的目的键操纵true
minItems一次起码展现滑动内容的单位个数1
maxItems一次最多展现滑动内容的单位个数0
move一次滑动的单位个数0
回调函数start: function(){}, 
before: function(){},
after: function(){}, 
end: function(){}, 
added: function(){}, 
removed: function(){}, 
init: function(){},
-

FlexSlider插件的具体设置参数:

$(window).load(function() {
    $('.flexslider').flexslider({

        namespace: 'flex-',    //控件的定名空间,会影响款式前缀 
        animation: "slide", //String: Select your animation type, "fade" or "slide"图片变更体例:淡入淡出或滑动
        slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"图片设置为滑动式时的滑动标的目的:摆布或高低        
        selector: '.thumbnails .thumbnail',
        slideshowSpeed: 5000, // 主动播放速率毫秒
        animationSpeed: 600, //转动结果播放时长
        pausePlay: false,//是不是显现播放停息按钮
        minItems: common.globals.SCREEN.ITEM,//起码显现几多项
        itemWidth: 220,//一个转动名目的宽度
        itemMargin: 20,//转动名目之间的间距
        slideshow: true, //Boolean: Animate slider automatically 载入页面时,是不是主动播放
        animationDuration: 600, //Integer: S动画淡入淡出结果延时
        directionNav: true, //Boolean:  (true/false)是不是显现摆布节制按钮
        controlNav: true, //Boolean:  usage是不是显现节制菜单//甚么是节制菜单?
        keyboardNav: true, //Boolean:left/right keys键盘摆布标的目的键节制图片滑动
        mousewheel: false, //Boolean: mousewheel鼠标滚轮节制制图片滑动
        prevText: "Previous", //String: 上一项的笔墨
        nextText: "Next", //String: 下一项的笔墨
        pauseText: 'Pause', //String: 停息笔墨
        playText: 'Play', //String: 播放笔墨
        randomize: false, //Boolean: Randomize slide order 是不是随机幻灯片
        slideToStart: 0, //Integer:  (0 = first slide)初始化第一次显现图片地位
        animationLoop: true, //  "disable" classes at either end 是不是轮回转动 轮回播放
        pauseOnAction: true, //Boolean:  highly recommended.
        pauseOnHover: false, //Boolean: ng
        controlsContainer: "", //Selector:  be taken.
        manualControls: ".js-slidernav i", //Selector: .自界说节制导航// 小圆点活数字标示 css 挑选器        
        manualControlEvent: "", //String:自界说导航节制触发事务:默许是click,能够设定hover
        start: function() {}, //Callback: function(slider) - Fires when the slider loads the first slide
        before: function() {}, //Callback: function(slider) - Fires asynchronously with each slider animation
        after: function() {}, //Callback: function(slider) - Fires after each slider animation completes
        end: function() {} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)        
    });
});

更多Flexslider相干信息能够拜候Flexslider官网地点: