jquery dialog title，jquery 遍历元素 属性，jquery添加js函数，jquery对象获取id属性的值，jquery的框架结构，jquery 联动下啦，jquery webservice 验证，jquery多层选择，jquery得到点击dom，jquery dialog title
这是一款jquery全屏响应式淡入淡出效果轮播图插件。该轮播图插件简单实用，兼容ie8浏览器，可以自动切换播放，带淡入淡出的动画效果。
FlexSlider – FlexSlider是一个非常出色的jQuery滑动切换插件，它支持所有主流浏览器，并有淡入淡出效果。适合所有初级和高级网页设计师使用。不过很多人都只是使用默认的参数，今天来说说具体的参数来给大家看看！
$(window).load(function(){
$('.flexslider').flexslider({
animation:"fade",//String:Selectyouranimationtype,"fade"or"slide"图片变换方式：淡入淡出或者滑动
slideDirection:"horizontal",//String:Selecttheslidingdirection,"horizontal"or"vertical"图片设置为滑动式时的滑动方向：左右或者上下
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:Setthetextforthe"previous"directionNavitem
nextText:"Next",//String:Setthetextforthe"next"directionNavitem
pausePlay:false,//Boolean:Createpause/playdynamicelement
pauseText:'Pause',//String:Setthetextforthe"pause"pausePlayitem
playText:'Play',//String:Setthetextforthe"play"pausePlayitem
randomize:false,//Boolean:Randomizeslideorder是否随即幻灯片
slideToStart:0,//Integer:Theslidethattheslidershouldstarton.Arraynotation(0=firstslide)初始化第一次显示图片位置
animationLoop:true,//Boolean:Shouldtheanimationloop?Iffalse,directionNavwillreceived"disable"classesateitherend是否循环滚动
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-navli"or"#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-Compatible"content="IE=edge,chrome=1">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>jquery全屏响应式淡入淡出效果轮播图插件</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/javascript"src="jquery.flexslider-min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$('.flexslider').flexslider({
directionNav:true,
pauseOnAction:false,
slideshowSpeed:3000
});
});
</script>
</body>
</html>