jquery.flexslider.js带左右箭头且带按钮可滚动的图片插件

一、插件介绍

FlexSlider是一个非常出色的jQuery滑动切换插件，它支持所有主流浏览器，并有淡入淡出效果。FlexSlider对于网站开发者来说是一个不错测JQUERY特效，因为支持全浏览器深受中国网站前端开发者的喜爱！

二、插件图片、DEMO及下载

1、带有左右按钮、小圆点儿的轮播图

 

2、全屏轮播图片

 

 

3、FlexSlider制作新浪2014成都车展幻灯片演示

 

三、插件作者下载地址

兼容浏览器：IE6+/Firefox/Google Chrome 

官方链接：http://www.woothemes.com/flexslider/ 

JS下载：http://www.ijquery.cn/js/flexslider/jquery.flexslider.js 

预览： http://www.ijquery.cn/demo/flexslider 

打包下载： http://www.ijquery.cn/demo/flexslider/flexslider.zip

五、最简使用教程

JS和CSS引用代码：

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/flexslider/jquery.flexslider.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.ijquery.cn/js/flexslider/flexslider.css" media="all" />
<script type="text/javascript" >
$(function(){
$(‘.flexslider’).flexslider();
});
</script>

HTML代码：这里一定要控制div的宽度！

<div style="width:500px;height:315px;">
<ul>
<li><img src="images/slide1.jpg"/></li>
<li><img src="images/slide2.jpg"/></li>
<li><img src="images/slide3.jpg"/></li>
</ul>
</div>

 

五、参数说明：

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

 

 原文地址：http://www.ijquery.cn/?p=176