FlexSlider 是一个功能强大的响应式jQuery滑块插件,它提供了一种简单而灵活的方式来创建漂亮的幻灯片展示，适用于各种网站和应用程序。
关键代码：
<div class="banner">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/banner1.jpg" /></li>
<li>
<img src="images/banner2.jpg" /></li>
</ul>
</div>
</div>
<!-- js调用部分begin -->
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script> $(function () { $('.flexslider').flexslider({ directionNav: true, pauseOnAction: false }); }); </script>
<!-- js调用部分end -->主要特点
响应式设计：Flexslider可以自动适应不同屏幕尺寸和设备类型，确保在各种设备上都能良好地显示。
自定义选项：它提供了丰富的选项，可以轻松地自定义幻灯片的外观和行为，包括动画效果、速度、自动播放、导航控制等。
支持多种内容：除了图片，Flexslider还可以用于展示其他类型的内容，如视频、HTML元素等。
触摸和滑动支持：它支持触摸和滑动手势，使用户可以通过滑动屏幕来浏览幻灯片。
轻量级：Flexslider是一个轻量级的插件，加载速度快，对网页性能影响较小。
参数说明
<script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade", //String: 动画效果类型, fade：淡入淡出, slide：滑动
slideDirection: "horizontal", //String: 内容滚动方向，horizontal：水平方向和 vertical：垂直方向
slideshow: true, //Boolean: 载入页面时，是否自动播放
slideshowSpeed: 7000, //Integer: 自动播放速度毫秒
animationDuration: 600, //Integer: 动画效果延时
directionNav: true, //Boolean: 是否显示左右方向箭头按钮 (true/false)
controlNav: true, //Boolean: 控制是否显示导航小圆点。可以设置为'true’（默认值）或'false'。
keyboardNav: true, //Boolean: 是否支持键盘方向键操作
mousewheel: false, //Boolean: 是否支持鼠标滚轮控制制图片滑动
prevText: "Previous", //String: 左方向箭头按钮显示文字
nextText: "Next", //String: 右方向箭头按钮显示文字
pausePlay: false, //Boolean: 是否创建暂停与播放按钮
pauseText: 'Pause', //String: 暂停按钮文字
playText: 'Play', //String: 播放按钮文字
randomize: false, //Boolean: 是否随即幻灯片顺序
slideToStart: 0, //Integer: 初始化第一次显示图片位置
animationLoop: true, //Boolean: 是否循环播放
pauseOnAction: true, //Boolean: 用户操作时停止自动播放
pauseOnHover: false, //Boolean: 悬停时是否暂停自动播放
controlsContainer: "", //Selector: 声明导航元素也应附加到哪个容器。默认容器是flexSlider元素。
manualControls: "", //Selector: 声明自定义控件导航。例如“.flex control nav li”或“#tabs nav li img”等。
manualControlEvent:"", //String:自定义导航控制触发事件:默认是click,可以设定hover
start: function(){}, //Callback: function(slider) - 滑块加载第一个滑块时回调函数
before: function(){}, //Callback: function(slider) - 与每个滑块动画异步
after: function(){}, //Callback: function(slider) - 每个滑块动画完成后触发
end: function(){} //Callback: function(slider) - 当滑块到达最后一个滑块时触发（异步）
});
});
</script>
