最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 二当家的 2013-12-12 02:02浏览(1650)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

flexslider图片轮播、多图相册滑动(支持触屏版)
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源: 121

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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参数设置

参数 描述 默认值
animation 动画效果 fade
direction 内容滑动方向:horizontal(水平) vertical(垂直) horizontal
animationLoop 是否循环滚动 true
startAt 初始滑动时的起始位置,定位从第几个开始滑动 0
slideshow 是否自动滑动 true
slideshowSpeed 滑动内容展示时间(ms) 7000
animationSpeed 内容切换时间(ms) 600
initDelay 初始化延时时间 0
pauseOnHover 当鼠标滑动到滚动内容时,是否暂停滚动 false
touch 是否支持触摸滑动(包括wap及其他移动设备) true
directionNav 是否显示左右箭头按钮 true
minItems 一次最少展示滑动单元个数 1
maxItems 一次最多展示滑动单元个数 0
move 一次滑动单元个数 0
回调函数

start: function(){},

before: function(){},

after: function(){},

end: function(){},

added: function(){},

removed: function(){},

init: function(){},

-
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/6.html
评论3
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 板凳
    03-30 08:13
    ngu137
    不错的轮播图特效啊
  • 头像 椅子
    01-10 19:09
    ngu137
    不错学习下啊。。。。
  • 头像 沙发
    10-07 17:50
    ngu137
    不错学习啦!!!。。。。
1 2