最新消息:

FlexSlider插件的详细设置参数

网页设计 李金龙 58444浏览 0评论

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

$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade", //String: Select your animation type, "fade" or "slide"图片变换方式:淡入淡出或者滑动
slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"图片设置为滑动式时的滑动方向:左右或者上下
slideshow: true, //Boolean: Animate slider automatically 载入页面时,是否自动播放
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds 自动播放速度毫秒
animationDuration: 600, //Integer: Set the speed of animations, in milliseconds动画淡入淡出效果延时
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)是否显示左右控制按钮
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage是否显示控制菜单
keyboardNav: true, //Boolean: Allow slider navigating via keyboard left/right keys键盘左右方向键控制图片滑动
mousewheel: false, //Boolean: Allow slider navigating via mousewheel鼠标滚轮控制制图片滑动
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: 'Pause', //String: Set the text for the "pause" pausePlay item
playText: 'Play', //String: Set the text for the "play" pausePlay item
randomize: false, //Boolean: Randomize slide order 是否随即幻灯片
slideToStart: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)初始化第一次显示图片位置
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end 是否循环滚动
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
controlsContainer: "", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: "", //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.自定义控制导航
manualControlEvent:"", //String:自定义导航控制触发事件:默认是click,可以设定hover
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)

});
});

转载请注明: » FlexSlider插件的详细设置参数

发表我的评论
取消评论

表情

网友最新评论 (25)

  1. 博主的文章写的太精彩了,我支持,希望博主也能支持一下我,回踩一下。
    倩雨5年前 (2014-06-07)
  2. 博主的文章写的很不错,我支持,希望博主也能支持一下我,回踩一下。
    小雨5年前 (2014-06-07)
  3. 文章不错 支持一下 记得回访哦
    小营博客5年前 (2014-06-08)
  4. 谢谢支持!
    李金龙5年前 (2014-06-11)
  5. 大家都互相支持!
    李金龙5年前 (2014-06-11)
  6. 测试是否会进垃圾评论!
    李金龙5年前 (2014-06-13)
  7. 难道这个也会进垃圾邮件?
    李金龙5年前 (2014-06-13)
  8. 第一次来访,博主写得文章不错。
    微信营销博客5年前 (2014-06-16)
  9. 文章写的不错,支持一下!希望帮忙互踩一下!
    赚神博客5年前 (2014-06-18)
  10. 虽然不知道什么意思,不明觉厉呀
    郑州SEO5年前 (2014-06-22)
  11. 用到了就知道了!
    李金龙5年前 (2014-06-26)
  12. 很好!
    皇家马德里5年前 (2014-08-05)
  13. 博主写的很好,提个问题哈,能不能鼠标悬停时停止滚动?
    玉尔5年前 (2014-08-27)
  14. 你好! 如何设置 左右按钮 隐藏,即鼠标放到图片上时才显示。 移开时 隐藏!
    随风5年前 (2014-10-27)
  15. 你好,本人也非常喜欢这个插件,但里面的 manualControlEvent:"", 这个参数应该没有吧。我加上不起作用。我是很想把它把成鼠标悬停变化的,但设置成hover不起任何作用。求解啊!!
    艺帆工作室5年前 (2014-11-08)
  16. 这个参数我没有测试,抽空测试一下!
    李金龙5年前 (2014-11-11)
  17. 为什么点击按钮之后,就不会自动播放了?
    深圳前端5年前 (2014-12-10)
  18. 用JS控制显隐
    1234年前 (2015-06-01)
  19. 有显示左右按钮,当前页是首尾页时,禁掉对应两端的操作好像不行,禁用的样式有出来,但是还是能点击切换,这个怎么搞?
    深圳网友4年前 (2015-07-07)
  20. 怎么设置图片从上往下翻呢 现在是从下往上翻
    点点滴滴4年前 (2015-07-29)
  21. 手机当我触碰滑动过后,就不自动切换了
    卡卡4年前 (2015-08-11)
  22. 你的问题解决了吗,我也遇到了额
    Mandy4年前 (2015-08-18)
  23. pauseOnAction:false,
    骏点3年前 (2015-12-21)
  24. 想使用悬停切换的网友 修改FlexSlider.js 找到eventType = "click touchend MSPointerUp keyup", 参数添加hover即可
    Epta3年前 (2016-08-23)
  25. 好文章,学习一下。
    astana3年前 (2016-11-16)