flexslider

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:

})

})

时间: 2024-12-10 15:51:22

flexslider的相关文章

flexslider轮播器插件【兼容IE6】

Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效果. 查看演示    下载源码 Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素. 自适应屏幕尺寸. 可控制滑动单元个数. 更多选项设置和回调函数. HTML 首先在页面head部位载入j

图片轮播插件FlexSlider

推荐一款万能图片轮播插件FlexSlider 先来看一下都能做出什么效果吧 轮播图方向控制按钮和底部的焦点按钮都是可以控制显示和隐藏,最厉害的一点是该插件支持手机触屏 具体参数设置当然还是github更权威https://github.com/woothemes/FlexSlider/ 友情提示:在github上下载的demo由于用的是google的CDN,由于google被墙可能导致无法运行,建议更改jQuery的调用地址 最后看一下支付宝官方网站上的对该插件的应用效果图

记一个好用的轮播图的FlexSlider

之前给自己公司的主页套用过一个js动态生成的轮播图,但是从载入的时机和载入后的效果都不太理想,又懒得去优化了,这次偶然遇到一个比较不错的轮播图的js插件,记录之. 首先它是给予jquery的,引进jquery和jquery.flexslider-min.js,然后定义div范围,在div内定义好要轮播的ul和li标签,然后设置flex参数渲染即可.不多说,上代码 <html> <body> <div class="flexslider"> <u

FlexSlider插件的详细设置参数

$(window).load(function() { $('.flexslider').flexslider({ animation: "fade", //String: Select your animation type, "fade" or "slide"图片变换方式:淡入淡出或者滑动 slideDirection: "horizontal", //String: Select the sliding directio

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

FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发中试试. 温馨提示:响应式效果需要再 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中才支持. 效果演示     插件下载 使用示例: <div class="flexslider"> <ul class="slides"&g

Flexslider图片轮播、文字图片相结合滑动切换效果

Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效果. Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素. 自适应屏幕尺寸. 可控制滑动单元个数. 更多选项设置和回调函数. HTML 首先在页面head部位载入jquery库文件和Flex

FlexSlider是一个非常出色的jQuery滑动切换插件

FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看! $(window).load(function() { $('.flexslider').flexslider({ animation: "fade", //String: Select your animation type, "fade" or "sl

用FlexSlider制作支付宝2013版幻灯片演示插件

flexslider制作支付宝2013版幻灯片精美特效,一款非常不错的jQuery特效源码可在下面地址或去源码搜藏网下载适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 效果预览 点击下载 <div class="flexslider"> <ul class="slides"> <li style="background: url(http://www.codesoca

jquery插件-flexslider

幻灯片:http://www.woothemes.com/flexslider/ 引入js和样式文件后,增加样式: .flexslider {     margin: 0 auto 3em;     width: 50%;     min-width: 800px; } .flex-caption {     width: 96%;     padding: 2%;     left: 0;     bottom: 0;     background: rgba(0, 0, 0, .5);