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

来源：互联网发布：淘宝宝贝推荐代码编辑：程序博客网时间：2024/04/18 18:21

一、插件介绍

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是否循环滚动truestartAt初始滑动时的起始位置，定位从第几个开始滑动0slideshow是否自动滑动trueslideshowSpeed滑动内容展示时间(ms)7000animationSpeed内容切换时间(ms)600initDelay初始化时延时时间0pauseOnHover鼠标滑向滚动内容时，是否暂停滚动falsetouch是否支持触摸滑动truedirectionNav是否显示左右方向箭头按钮truekeyboard是否支持键盘方向键操作trueminItems一次最少展示滑动内容的单元个数1maxItems一次最多展示滑动内容的单元个数0move一次滑动的单元个数0回调函数start: function(){},
before: function(){},
after: function(){},
end: function(){},
added: function(){},
removed: function(){},
init: function(){},原文：http://www.ijquery.cn/?p=176

0 0