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的参数设置;
});
});