flexslider是一个出色的jquery滑动切换插件,支持主流浏览器,并有淡入淡出效果。适合初级和高级网页设计师。

查询了网上资料  总结一下flexslider属性

$(function(){

$(".flexslider").flexslider({

animation:"slide"      表示滑动  还有一个"fade" 表示淡入淡出

slideshow: true        表示载入页面时,是否自动播放

slideshowSpeed :2000       表示载入自动 播放速度

animationDuration :400      淡入淡出效果延迟

slideDirection :"horizontal"    左右滑动   “vertical” 上下滑动

directionNav:true   是否显示左右控制按钮

keyboardNav:true  是否 键盘左右方向键控制图片滑动

preText:"Previous"   设置上一个按钮的文本

nextText:"Next"   设置下一个按钮的文本

常见的差不多 就是这样的

下面有几个事件

start:function(){},  开始滑动第一个的时候

before:

after:

end:

})

})

flexslider的更多相关文章

  1. 首页大图淡入淡出效果工具flexslider

    网站首页放几张高清大图轮流播放展示是目首页设计的流行做法,虽然woothemes.com已经公布了比较成熟的flexslider工具,但本着造轮子的心态,我也做了一个自己的flexslider,当然我 ...

  2. FlexSlider jQuery滑动切换插件 参数

    demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...

  3. Flexslider - 响应式的 jQuery 内容滚动插件

    FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...

  4. flexslider.js和waypoints.js一起用时的巨坑

    Flexslider has a callback API where you can execute functions after various actions:https://github.c ...

  5. 幻灯片插件FlexSlider -- Amaze UI幻灯片参数

    用了Amaze UI 的人就知道,其幻灯片插件是 data-am-slider='{}'来传参数的:(以下代码来自Amaze UI 官网) <div data-am-widget="s ...

  6. FlexSlider插件的详细设置参数

    FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...

  7. FlexSlider插件的详细设置参数 http://www.woothemes.com/flexslider/ -----幻灯片插件

    $(window).load(function() { $('.flexslider').flexslider({ namespace: 'flex-', //控件的命名空间,会影响样式前缀 anim ...

  8. [原创]flexslider 中文文档 使用教程 参数手册

    要改前人用的flexslider功能,但苦于找不到详细的文档教程,折磨了好久……(所以我才说不爱乱用插件) 为了福利下之后也苦于这个问题的人,我整理总结了下我找到的一些东西.可能没那么完善正确,欢迎在 ...

  9. FlexSlider插件的详细设置参数 http://www.woothemes.com/flexslider/

    http://www.woothemes.com/flexslider/ FlexSlider插件的详细设置参数 $(window).load(function() { $('.flexslider' ...

随机推荐

  1. Make div 100% height of browser window/设置div等于浏览器的高度

    Viewport-Percentage (or Viewport-Relative) Lengths Viewport-Percentage Lengths: The viewport-percent ...

  2. maven、strutst版本号

    struts.2.3.15.3 :大版本号 struts1-->struts2 :分支版本号 增加新功能 :小版本号 修复bug beta:公测版release:发行版(已可以使用)Genera ...

  3. Codeforces Round #374 (div.2)遗憾题合集

    C.Journey 读错题目了...不是无向图,结果建错图了(喵第4样例是变成无向就会有环的那种图) 并且这题因为要求路径点尽可能多 其实可以规约为限定路径长的拓扑排序,不一定要用最短路做 #prag ...

  4. VC++6.0在Win7以上系统上Open或Add to Project files崩溃问题 解决新办法

    崩溃原因是和office高版本冲突,比如我64位win7装了64位office2013及visio就遇到了这个问题(我很纳闷,记得重装系统前装的是32位office2013及visio就未曾遇到该问题 ...

  5. 車(rook)

    [题目分析] JustPenz:我们假设n>m(不大于就交换),那最多能摆m个,所以会有(n-m)个空白,我们把这些空白插入到n中,答案就是C(n,n-m)=C(n,m);数据范围比较大,我们就 ...

  6. SQL语句中&、单引号等特殊符号的处理

    今天遇到一个insert语句,在SQL Tools(链接Oracle数据库)插入的某列值为“Computer Hardware & Software>>CPU",这样执行 ...

  7. nodejs搭建http-server

      很多时候我们都需要搭建一个简单的服务器,部署在IIS,阿帕奇,或者用nodejs,网上很多关于nodejs搭建server的文章,但都是要创建server.js,很麻烦, 在这里我分享一个创建ht ...

  8. (转载)U-boot启动完全分析

    1.1 U-Boot工作过程 U-Boot启动内核的过程可以分为两个阶段,两个阶段的功能如下: (1)第一阶段的功能 Ø 硬件设备初始化 Ø 加载U-Boot第二阶段代码到RAM空间 Ø 设置好栈 Ø ...

  9. pytessact 出现Error2错误

    x pytessact安装后不起作用 一.没有安装tessact-ocr 点击下载,安装 http://jaist.dl.sourceforge.net/project/tesseract-ocr-a ...

  10. angular directive scope

    angular directive scope 1.当directive 中不指定scope属性,则该directive 直接使用 app 的scope: 2.当directive 中指定scope属 ...