0712-2888027 189-8648-0214
微信公众号

孝感风信网络科技有限公司微信公众号

当前位置: 主页 > 技术支持 > Javascript/JQuery > JQuery flexSlider响应式图片轮播插件

JQuery flexSlider响应式图片轮播插件

时间:2018-08-09来源:风信网 点击:

Flexslider是一款基于的jQuery内容滚动插件。它能让你轻松的创建内容滚动的效果,具有非常高的可定制性。开发者可以使用Flexslider轻松创建各种图片轮播效果、焦点图效果、图文混排滚动效果。

源代码下载地址:https://github.com/woothemes/FlexSlider/zipball/master

更多使用示例演示地址:http://flexslider.woothemes.com/index.html

Flexslider具有以下特性:

支持滑动和淡入淡出效果。
支持水平、垂直方向滑动。
支持键盘方向键控制。
支持触控滑动。
支持图文混排,支持各种html元素。
自适应屏幕尺寸。
可控制滑动单元个数。
更多选项设置和回调函数。
 

引入flexslider.css和jquery.flexslider-min.js文件

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

HTML代码结构:

<!-- 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>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>

JQuery代码结构:

// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});


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(){},
-

 

栏目列表
推荐内容
热点内容
展开