首页 > 特效插件 > 滚动轮播 >  flexslider.js图片轮播插件正文

flexslider.js图片轮播插件

特效介绍

大图缩略图.jpg


    flexslider.js是一款基于jQuery图片滚动插件,小巧玲珑,压缩后仅40k,但功能又很强大,拓展性很高;使用简单,无需繁琐的html;支持常规的图片轮播效果、焦点图效果、图文混排滚动、无缝滚动效果等等,并且还支持手机端等移动设备。

使用方法

1、在head区域引入css

<link rel="stylesheet" type="text/css" href="flexslider.css" />


2、在body结束前引入相关js

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>  
<script type="text/javascript" src="jquery.flexslider-min.js"></script>


3、准备html

<div class="flexslider">  
      <ul class="slides">  
        <li><img src="images/demo1.jpg" /></li>  
        <li><img src="images/demo2.jpg" /></li>  
        <li><img src="images/demo3.jpg" /></li>  
        <li><img src="images/demo4.jpg" /></li>  
      </ul>  
</div>


4、调用Flexslider插件:

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


5、更多参数配置:

参数描述默认值
animation动画效果fade
direction内容滑动方向:horizontal(水平) vertical(垂直)horizontal
animationLoop是否循环滚动true
startAt初始滑动时的起始位置,定位从第几个开始滑动0
slideshow是否自动滑动true
slideshowSpeed滑动内容展示时间(ms)7000
animationSpeed内容切换时间(ms)600
initDelay初始化延时时间0
pauseOnHover当鼠标滑动到滚动内容时,是否暂停滚动false
touch是否支持触摸滑动(包括wap及其他移动设备)true
directionNav是否显示左右箭头按钮true
minItems一次最少展示滑动单元个数1
maxItems一次最多展示滑动单元个数0
move一次滑动单元个数0
回调函数

start: function(){},

before: function(){},

after: function(){},

end: function(){},

added: function(){},

removed: function(){},

init: function(){},

-
下载 提取码/密码:4m9s(点击复制密码) 预览