flexslider图片轮播、多图相册滑动(支持触屏版)

收藏

Flexslider是一款jQuery滚动插件，代码非常简洁，拓展性很高。可创建图片轮播效果、焦点图效果、图文混排滚动效果，支持手机端等移动设备滑动。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

Flexslider最受众多开发人员好评的优秀，具有以下优势：

• 支持触屏移动设备滑动。
• 支持滑动和淡入淡出效果。
• 支持水平、垂直方向滑动。
• 支持键盘方向键控制。
• 支持图文并茂滑动。
• 自适应屏幕大小。
• 易控制滑动单元个数。
• 选项设置和回调函数很丰富。

HTML

<div class="flexslider"> 
      <ul class="slides"> 
        <li><img src="images/demo1.jpg" /></li> 
        <li><img src="images/demo2.jpg" /></li> 
        <li><img src="images/demo3.jpg" /></li> 
        <li><img src="images/demo4.jpg" /></li> 
      </ul> 
</div>

接着加载jQuery.js和jquery.flexslider-min.js及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>

jQuery

调用Flexslider插件超级简单，只要用以下代码即可：

$(function() { 
    $(".flexslider").flexslider(); 
});

Flexslider参数设置