建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:23收藏

简介


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


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



使用


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