Macro Da

每天学一点,成长多一点!

flexslider轮播插件,强大的图片轮播、文字图片相结合滑动切换效果

碰巧看到有个手机网站使用了这个插件,就去了解了一下这个插件,发现还是很实用的一个JQ插件,于是就成为了我目前最常用的插件之一。这个插件的亮点是支持触摸滚动,也就是说可以用在移动端上,同时也可以在PC端上。

Flexslider是一款基于的jQuery内容滚动插件。它能让你轻松的创建内容滚动的效果,具有非常高的可定制性。开发者可以使用Flexslider轻松创建各种图片轮播效果、焦点图效果、图文混排滚动效果。

目前最新的版本是2.6.2,功能优化相对好一点,如需下载最新版本,到官方网站下载:https://woocommerce.com/flexslider/

特性如下:

  1. 简单,语义标记
  2. 支持所有主流浏览器
  3. 水平/垂直滑动和过渡动画
  4. 多滑块支持回调API等等
  5. 硬件加速的触摸滑动支持
  6. 自定义导航选项

使用方法如下:

首先引用JQ库和和Flexslider插件,以及插件所需要用到的CSS文件

<link rel="stylesheet" href="css/flexslider.css">
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>

如果需要用到内容切换时缓动效果,则在Flexslider插件前引用jquery.easing.js插件,jquery.easing.js插件可自行搜索下载

<script src="js/jquery.easing.min.js"></script>

HTML代码如下

<div class="flexslider">
		<ul class="slides">
			<li><a href="#"><img src="images/1.jpg" /></a></li>
			<li><a href="#"><img src="images/2.jpg" /></a></li>
			<li><a href="#"><img src="images/3.jpg" /></a></li>
		</ul>
	</div>

页面调用Flexslider的JS代码,其中 animation: 'slide' 为插件选项参数,可省略不写,后面会介绍插件选项参数详细信息

<script>
$(function(){
    $('.flexslider').flexslider({animation: 'slide'});
});
</script>

完成以上工作就可以预览页面看实际效果了,如果不正常,请检查js及css路径是否正确。

选项参数设置说明(因为是翻译过来的,意思不太准确)

财产 默认的 描述
namespace "flex-" String前缀字符串附加到类的所有元素生成的插件。
selector ".slides > li" Selector必须匹配一个简单的模式。'{container} > {slide}'
animation "fade" String 切换动画类型,"fade""slide"
easing "swing" 内容切换时缓动效果,需要jquery easing插件支持
direction "horizontal" String控制动画方向,"horizontal""vertical"
reverse false Boolean反向动画方向。
animationLoop true Boolean给出了滑块无缝的无限循环。
smoothHeight false Boolean顺利推动滑块的高度不同高度的幻灯片。
startAt 0 Number数组的起始滑动滑块,在符号。
slideshow true Boolean自动设置滑块的幻灯片动画。
slideshowSpeed 7000 Number设置幻灯片的速度骑自行车,以毫秒为单位
animationSpeed 600 Number设置动画的速度,以毫秒为单位
initDelay 0 Number设置一个初始化延迟,以毫秒为单位
randomize false Boolean随机幻灯片顺序,在负载
pauseOnAction true Boolean与控制交互时暂停幻灯片元素。
pauseOnHover false Boolean暂停幻灯片当悬停在滑块,然后恢复当不再徘徊。
useCSS true Boolean滑块将使用CSS3转换,如果可用
touch true Boolean启用允许触摸滑动滑块的导航设备
video false Boolean可以防止使用CSS3 3 d变换,避免图形故障
controlNav true Boolean创建分页导航控制每个幻灯片。
customDirectionNav "" jQuery Object/Selector容器使用自定义导航标记。
directionNav true Boolean创建之前/下箭头导航。
prevText "Previous" String设置文本的“前”directionNav
nextText "Next" String设置文本的“下一个”directionNav
keyboard true Boolean允许滑块通过键盘左/右导航键。
multipleKeyboard false Boolean让键盘导航影响多个滑块。
mousewheel false Boolean(依赖)允许滑块通过mousewheel导航
pausePlay false Boolean创建暂停/播放元素来控制滑块幻灯片。
pauseText "Pause" String设置文本的“暂停”pausePlay
playText "Play" String设置文本的“玩”pausePlay
controlsContainer "" jQuery Object/Selector容器应附加的导航元素。
manualControls "" jQuery Object/Selector用于代替动态定义元素controlNav
sync "" Selector镜子与另一个滑块滑块上的执行的操作。
asNavFor "" Selector把滑块变成一个缩略图导航为另一个滑块。
itemWidth 0 Number框模型宽度个人旋转木马的项目,包括水平边框和填充。
itemMargin 0 Number旋转木马项目之间。
minItems 0 Number最小数量的旋转木马的物品应该是可见的。
maxItems 0 Number最大数量的旋转木马的物品应该是可见的。
move 0 Number旋转木马的物品数量应继续动画。
start empty Function火灾时,滑块加载第一张幻灯片。
before empty Function火灾与每个滑块异步动画。
after empty Function火灾后每个滑块动画完成。
end empty Function火灾时滑到最后一张幻灯片(异步)。
added empty Function火灾之后添加一个幻灯片。
removed empty Function

如需了解更多功能,可到官网了解,官网介绍的比较详细。
https://woocommerce.com/flexslider/

点赞

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注