当前位置: 首页 > 工具软件 > s3Slider > 使用案例 >

Flex slider使用方法

白坚壁
2023-12-01

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

转载于:https://www.cnblogs.com/well-nice/p/4438543.html

 类似资料: