简介
FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果。 压缩后只有4KB大小, FlexSlider对于网站开发者来说是一个不错测JQUERY特效,因为支持全浏览器深受中国网站前端开发者的喜爱! 它将UL列表转换成内容滚动的列表,可以自动播放,或者使用导航按钮和键盘来控制。使用方法
1、引入文件
<link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"css/flexslider.css"
/>
2、HTML
<divclass="flexslider"style="width:500px;margin-left:110px;">
<ulclass="slides">
<li><imgsrc="images/s1.jpg"/></li>
<li><imgsrc="images/s2.jpg"/></li>
<li><imgsrc="images/s3.jpg"/></li>
<li><imgsrc="images/s4.jpg"/></li>
</ul>
</div>
3、JavaScript
<scriptsrc="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<scripttype="text/javascript"src="js/jquery.flexslider-min.js"></script>
<scripttype="text/javascript">
$(function(){
$(".flexslider").flexslider({
slideshowSpeed:4000,//展示时间间隔ms
animationSpeed:400,//滚动时间ms
touch:true//是否支持触屏滑动
});
});
</script>
参数
参数 | 描述 | 默认值 |
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 |
回调函数 | start: function(){}, before: function(){}, after: function(){}, end: function(){}, added: function(){}, removed: function(){}, init: function(){}, | – |
$(window).load(function() { $('.flexslider').flexslider({ animation: "fade", //String: "fade" or "slide"图片变换方式:淡入淡出或者滑动 slideDirection: "horizontal", //String: "horizontal" or "vertical"图片设置为滑动式时的滑动方向:左右或者上下 slideshow: true, //Boolean: 载入页面时,是否自动播放 slideshowSpeed: 7000, //Integer: 自动播放速度毫秒 animationDuration: 600, //Integer: 动画淡入淡出效果延时 directionNav: true, //Boolean: (true/false)是否显示左右控制按钮 controlNav: true, //Boolean: 是否显示控制菜单 keyboardNav: true, //Boolean: 键盘左右方向键控制图片滑动 mousewheel: false, //Boolean: 鼠标滚轮控制制图片滑动 prevText: "Previous", //String: "previous" directionNav item nextText: "Next", //String: "next" directionNav item pausePlay: false, //Boolean: Create pause/play dynamic element pauseText: 'Pause', //String: "pause" pausePlay item playText: 'Play', //String: "play" pausePlay item randomize: false, //Boolean:是否随即幻灯片 slideToStart: 0, //Integer: (0 = first slide)初始化第一次显示图片位置 animationLoop: true, //Boolean: 是否循环滚动 pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended. pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering controlsContainer: "", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken. manualControls: "", //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.自定义控制导航 manualControlEvent:"", //String: 自定义导航控制触发事件:默认是click,可以设定hover start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation after: function(){}, //Callback: function(slider) - Fires after each slider animation completes end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous) });});
再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow