Flex slider使用方法

标签：

1.首先在页面head部位载入jquery库文件和Flexslider插件，以及Flexslider所需的基本css样式文件。

<link rel="stylesheet" type="text/css" href="flexslider.css" /> 

<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="jquery.flexslider-min.js"></script>
2.然后在body中加入以下HTML代码

<div class="flexslider"> 
      <ul class="slides"> 
        <li><img src="images/s1.jpg" /></li> 
        <li><img src="images/s2.jpg" /></li> 
        <li><img src="images/s3.jpg" /></li> 
        <li><img src="images/s4.jpg" /></li> 
      </ul> 
</div> 

这是一个完整的结构，可以在外面包各种标签或者放在任何标签内就可以了，在手机或者pc网页中用到两个以上的大图滚动就要用div或者别的包着，两个或两个以上的大图滚动就需要在css中去更改或添加前缀，这样不会使得两个以上的大图滚动产生混乱或者相同的效果。
3.在script里调用函数

$(function() { 
    $(".flexslider").flexslider({
　　　　这里为控制函数的参数，具体参上一篇关于flexslider的参数设置；
}); 
}); 

Flex slider使用方法

标签：

原文地址：http://www.cnblogs.com/well-nice/p/4438543.html