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

简介

FlexSlider - FlexSlider是一个非常出色的jQuery滑动切换插件，它支持所有主流浏览器，并有淡入淡出效果。适合所有初级和高级网页设计师使用。

使用

1.  引入 flexslider.css 、 jquery.js 和 jquery.flexslider.js 文件

2. HTML

<div class="flexslider">
  <ul class="slides">
    <li style="background:url(images/banner1.jpg) 50% 0 no-repeat;cursor:pointer"></li>
    <li style="background:url(images/banner2.jpg) 50% 0 no-repeat;cursor:pointer"></li>
    <li style="background:url(images/banner3.jpg) 50% 0 no-repeat;cursor:pointer"></li>
  </ul>
</div>
<style type="text/css" media="screen">
/*lunbo*/
.flexslider{position:relative;height:420px;overflow:hidden;background:url(images/loading.gif) 50% no-repeat;}
.slides{position:relative;z-index:1;}
.slides li{height:420px;}
.flex-control-nav{position:absolute;bottom:10px;z-index:2;width:100%;text-align:center;}
.flex-control-nav li{display:inline-block;width:14px;height:14px;margin:0 5px;*display:inline;zoom:1;}
.flex-control-nav a{display:inline-block;width:14px;height:14px;line-height:40px;overflow:hidden;background:url(images/dot.png) right 0 no-repeat;cursor:pointer;}
.flex-control-nav .flex-active{background-position:0 0;}
.flex-direction-nav{position:absolute;z-index:19;width:100%;top:45%;}
.flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute;}
.flex-direction-nav li a.flex-prev{left:40px;background:url(images/prev.png) center center no-repeat;}
.flex-direction-nav li a.flex-next{right:40px;background:url(images/next.png) center center no-repeat;}
</style>

3.  调用

<script type="text/javascript">
  $(document).ready(function(){
    $('.flexslider').flexslider({directionNav: true,pauseOnAction: false});
  });
</script>

相关链接

官网地址 ：http://www.woothemes.com/flexslider/

Github 地址 ：  https://github.com/dywp/FlexSlider

效果演示及文档 ：http://flexslider.woothemes.com/?_ga=2.85029785.1851977075.1675821227-1170530432.1675821226