jQuery.flexslider 支持触控滑动的图像轮播外挂，同时还可设定转场效果与数量

育碧 • 2023年9月24日 14:18 • 游戏攻略

梅问题-jQuery.flexslider 支持移动版，通过手指左右滚动的图像轮播外挂

图像轮播是网页常会用到的特效之一，除了自刻外网络上也有各式各样酷炫的轮播特效可使用，虽然这些轮播外挂也都支持RWD，但到了手机装置时，若要能透过手指左右滚动时，就得再搭配手指鼠标的外挂，才能让轮播图像的外挂，在手机装置时，也能透过手指滑动来切换图像。

因此最近梅干发现jQuery.flexslider这款图像轮播外挂相当的方便，除了支持RWD外，甚至到了手机装置时，还能设定是否要开启手指滑动，如此一来只要透过jQuery.flexslider这款外挂立即就能完成，甚至设定与使用上都相当的简单，因此有需要图像轮播的朋友jQuery.flexslider就一块来看看怎么用吧！

jQuery.flexslider链接网址：http://flexslider.woothemes.com/

Step1
首先，分别将jQuery.flexslider所需的CSS与JS给加载到网页中。

<!– jQuery.flexslider css –>
<link href="https://cdn.bootcss.com/flexslider/2.6.3/flexslider.min.css" rel="stylesheet">
<!– jQuery.flexslider js –>
<script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/flexslider/2.6.3/jquery.flexslider-min.js"></script>

Step2
当加载完毕后，接着在HTML中输入jQuery.flexslider的架构，输入完毕后在script的启用它，当启用后就会图像可以按左右箭头进行轮播。
梅问题-jQuery.flexslider 支持移动版，通过手指左右滚动的图像轮播外挂

Step3
当进入手机装置时，可以输入touch：ture的参数，这时到了移动设备，就可支持手指的左右滑动图像啦！而jQuery.flexslider可设定的参数也相当多，梅干就整理一下，各位有需要就行加入啰！
梅问题-jQuery.flexslider 支持移动版，通过手指左右滚动的图像轮播外挂

可用参数：

参数	说明	默认值
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