FlexSlider - 一个支持水平/垂直滑动,完全响应的jquery插件。
  • 分享到微信朋友圈
    X
立即下载 查看演示

关于FlexSlider

FlexSlider是由WooThemes开发的一款免费、开源的JavaScript滑动插件。 FlexSlider支持自适应布局。FlexSlider自V1.6起提供支助多个滑块，FlexSlider也增加旋转木马选项，提供了丰富的选项和配置参数，可以定制幻灯片的过渡效果、速度、自动播放等属性，以满足不同的需求。

如何使用FlexSlider

步骤1：调用所需文件

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

步骤2：创建 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>

步骤3：调用FlexSlider

<script type="text/javascript">
    // Can also be used with $(document).ready()
    $(window).load(function () {
        $('.flexslider').flexslider({
            animation: "slide"
        });
    });
</script>

参数说明

$(window).load(function() {
 $('.flexslider').flexslider({
  animation: "fade",              //String: 动画效果类型, fade：淡入淡出, slide：滑动 
  slideDirection: "horizontal",   //String: 内容滚动方向，horizontal：水平方向和 vertical：垂直方向 
  slideshow: true,                //Boolean: 载入页面时，是否自动播放
  slideshowSpeed: 7000,           //Integer: 自动播放速度毫秒
  animationDuration: 600,         //Integer: 动画效果延时
  directionNav: true,             //Boolean: 是否显示左右方向箭头按钮 (true/false)
  controlNav: true,               //Boolean: 控制是否显示导航小圆点。可以设置为'true’（默认值）或'false'。
  keyboardNav: true,              //Boolean: 是否支持键盘方向键操作
  mousewheel: false,              //Boolean: 是否支持鼠标滚轮控制制图片滑动
  prevText: "Previous",           //String: 左方向箭头按钮显示文字
  nextText: "Next",               //String: 右方向箭头按钮显示文字
  pausePlay: false,               //Boolean: 是否创建暂停与播放按钮
  pauseText: 'Pause',             //String: 暂停按钮文字
  playText: 'Play',               //String: 播放按钮文字
  randomize: false,               //Boolean: 是否随即幻灯片顺序
  slideToStart: 0,                //Integer: 初始化第一次显示图片位置
  animationLoop: true,            //Boolean: 是否循环播放
  pauseOnAction: true,            //Boolean: 用户操作时停止自动播放
  pauseOnHover: false,            //Boolean: 悬停时是否暂停自动播放
  controlsContainer: "",          //Selector: 声明导航元素也应附加到哪个容器。默认容器是flexSlider元素。
  manualControls: "",             //Selector: 声明自定义控件导航。例如“.flex control nav li”或“#tabs nav li img”等。 
  manualControlEvent:"",          //String:自定义导航控制触发事件:默认是click,可以设定hover
  start: function(){},            //Callback: function(slider) - 滑块加载第一个滑块时回调函数
  before: function(){},           //Callback: function(slider) - 与每个滑块动画异步
  after: function(){},            //Callback: function(slider) - 每个滑块动画完成后触发
  end: function(){}               //Callback: function(slider) - 当滑块到达最后一个滑块时触发（异步）
  
 });
});