flexslider图片轮播、多图相册滑动(支持触屏版)

Flexslider是一款jQuery滚动插件，代码非常简洁，拓展性很高。可创建图片轮播效果、焦点图效果、图文混排滚动效果，支持手机端等移动设备滑动。

分类：图片代码 > 图片轮播难易：初级

查看演示下载资源下载积分： 26 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

Flexslider最受众多开发人员好评的优秀，具有以下优势：

<ul class="ul_demo"> <li>支持触屏移动设备滑动。</li> <li>支持滑动和淡入淡出效果。</li> <li>支持水平、垂直方向滑动。</li> <li>支持键盘方向键控制。</li> <li>支持图文并茂滑动。</li> <li>自适应屏幕大小。</li> <li>易控制滑动单元个数。</li> <li>选项设置和回调函数很丰富。</li> </ul>

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>

接着加载jQuery.js和jquery.flexslider-min.js及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>

jQuery

调用Flexslider插件超级简单，只要用以下代码即可：

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

Flexslider参数设置

参数	描述	默认值
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(){},	-