jquery全屏响应式轮播图插件jquery.flexslider.js

《jquery全屏响应式轮播图插件jquery.flexslider.js》正文开始，本次阅读大概3分钟。

在zblogPHP主题 yunduan 上使用这个轮播幻灯片插件jquery.flexslider.js，分享下使用方法：

这是一款jquery全屏响应式淡入淡出效果轮播图插件。该轮播图插件简单实用，兼容ie8浏览器，可以自动切换播放，带淡入淡出的动画效果。

FlexSlider - FlexSlider是一个非常出色的jQuery滑动切换插件，它支持所有主流浏览器，并有淡入淡出效果。适合所有初级和高级网页设计师使用。不过很多人都只是使用默认的参数，今天来说说具体的参数来给大家看看！

$(window).load(function(){
$(.flexslider).flexslider({
animation:fade,//String:Selectyouranimationtype,fadeorslide图片变换方式：淡入淡出或者滑动
slideDirection:horizontal,//String:Selecttheslidingdirection,horizontalorvertical图片设置为滑动式时的滑动方向：左右或者上下
slideshow:true,//Boolean:Animatesliderautomatically载入页面时，是否自动播放
slideshowSpeed:7000,//Integer:Setthespeedoftheslideshowcycling,inmilliseconds自动播放速度毫秒
animationDuration:600,//Integer:Setthespeedofanimations,inmilliseconds动画淡入淡出效果延时
directionNav:true,//Boolean:Createnavigationforprevious/nextnavigation?(true/false)是否显示左右控制按钮
controlNav:true,//Boolean:Createnavigationforpagingcontrolofeachclide?Note:LeavetrueformanualControlsusage是否显示控制菜单
keyboardNav:true,//Boolean:Allowslidernavigatingviakeyboardleft/rightkeys键盘左右方向键控制图片滑动
mousewheel:false,//Boolean:Allowslidernavigatingviamousewheel鼠标滚轮控制制图片滑动
prevText:Previous,//String:SetthetextforthepreviousdirectionNavitem
nextText:Next,//String:SetthetextforthenextdirectionNavitem
pausePlay:false,//Boolean:Createpause/playdynamicelement
pauseText:Pause,//String:SetthetextforthepausepausePlayitem
playText:Play,//String:SetthetextfortheplaypausePlayitem
randomize:false,//Boolean:Randomizeslideorder是否随即幻灯片
slideToStart:0,//Integer:Theslidethattheslidershouldstarton.Arraynotation(0=firstslide)初始化第一次显示图片位置
animationLoop:true,//Boolean:Shouldtheanimationloop?Iffalse,directionNavwillreceiveddisableclassesateitherend是否循环滚动
pauseOnAction:true,//Boolean:Pausetheslideshowwheninteractingwithcontrolelements,highlyrecommended.
pauseOnHover:false,//Boolean:Pausetheslideshowwhenhoveringoverslider,thenresumewhennolongerhovering
controlsContainer:,//Selector:Declarewhichcontainerthenavigationelementsshouldbeappendedtoo.DefaultcontaineristheflexSliderelement.Exampleusewouldbe.flexslider-container,#container,etc.Ifthegivenelementisnotfound,thedefaultactionwillbetaken.
manualControls:,//Selector:Declarecustomcontrolnavigation.Examplewouldbe.flex-control-navlior#tabs-navliimg,etc.ThenumberofelementsinyourcontrolNavshouldmatchthenumberofslides/tabs.自定义控制导航
manualControlEvent:,//String:自定义导航控制触发事件:默认是click,可以设定hover
start:function(){},//Callback:function(slider)-Fireswhenthesliderloadsthefirstslide
before:function(){},//Callback:function(slider)-Firesasynchronouslywitheachslideranimation
after:function(){},//Callback:function(slider)-Firesaftereachslideranimationcompletes
end:function(){}//Callback:function(slider)-Fireswhenthesliderreachesthelastslide(asynchronous)

});
});

js下载：

jquery全屏响应式轮播图插件jquery.flexslider.js.zip

HTML：

!DOCTYPEhtml
html
head
metacharset=UTF-8
metahttp-equiv=X-UA-Compatiblecontent=IE=edge,chrome=1
metaname=viewportcontent=width=device-width,initial-scale=1.0
titlejquery全屏响应式淡入淡出效果轮播图插件/title
styletype=text/css
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/*flexslider*/
.flexslider{position:relative;height:400px;overflow:hidden;background:url(images/loading.gif)50%no-repeat;}
.slides{position:relative;z-index:1;}
.slidesli{height:400px;}
.flex-control-nav{position:absolute;bottom:10px;z-index:2;width:100%;text-align:center;}
.flex-control-navli{display:inline-block;width:14px;height:14px;margin:05px;*display:inline;zoom:1;}
.flex-control-nava{display:inline-block;width:14px;height:14px;line-height:40px;overflow:hidden;background:url(images/dot.png)right0no-repeat;cursor:pointer;}
.flex-control-nav.flex-active{background-position:00;}
.flex-direction-nav{position:absolute;z-index:3;width:100%;top:45%;}
.flex-direction-navlia{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute;}
.flex-direction-navlia.flex-prev{left:40px;background:url(images/prev.png)centercenterno-repeat;}
.flex-direction-navlia.flex-next{right:40px;background:url(images/next.png)centercenterno-repeat;}
/style
/head
body
div
div
ul
listyle=background:url(http://www.jq22.com/demo/jqueryflexslider201705191144/images/img1.png)50%0no-repeat;/li
listyle=background:url(images/img2.png)50%0no-repeat;/li
listyle=background:url(images/img3.png)50%0no-repeat;/li
listyle=background:url(images/img4.png)50%0no-repeat;/li
listyle=background:url(images/img5.png)50%0no-repeat;/li
/ul
/div

/div

scriptsrc=http://www.jq22.com/jquery/jquery-1.10.2.js/script
scripttype=text/javascriptsrc=jquery.flexslider-min.js/script
scripttype=text/javascript
$(document).ready(function(){
$(.flexslider).flexslider({
directionNav:true,
pauseOnAction:false,
slideshowSpeed:3000
});
});
/script
/body
/html