简介

FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果。压缩后只有4KB大小,FlexSlider对于网站开发者来说是一个不错测JQUERY特效,因为支持全浏览器深受中国网站前端开发者的喜爱!它将UL列表转换成内容滚动的列表,可以自动播放,或者使用导航按钮和键盘来控制。

使用方法

1、引入文件

<linkrel="stylesheet"type="text/css"href="css/flexslider.css"/>

2、HTML

<divclass="flexslider"style="width:500px;margin-left:110px;">

<ulclass="slides">

<li><imgsrc="data:images/s1.jpg"/></li>

<li><imgsrc="data:images/s2.jpg"/></li>

<li><imgsrc="data:images/s3.jpg"/></li>

<li><imgsrc="data:images/s4.jpg"/></li>

</ul>

</div>

3、JavaScript

<scriptsrc="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<scripttype="text/javascript"src="js/jquery.flexslider-min.js"></script>

<scripttype="text/javascript">

$(function(){

$(".flexslider").flexslider({

slideshowSpeed:4000,//展示时间间隔ms

animationSpeed:400,//滚动时间ms

touch:true//是否支持触屏滑动

});

});

</script>

参数

参数 描述 默认值
animation 动画效果类型,有”fade”:淡入淡出,”slide”:滑动 “fade”
easing 内容切换时缓动效果,需要jquery easing插件支持 “swing”
direction 内容滚动方向,有”horizontal”:水平方向 和”vertical”:垂直方向 “horizontal”
animationLoop 是否循环滚动 true
startAt 初始滑动时的起始位置,定位从第几个开始滑动 0
slideshow 是否自动滑动 true
slideshowSpeed 滑动内容展示时间(ms) 7000
animationSpeed 内容切换时间(ms) 600
initDelay 初始化时延时时间 0
pauseOnHover 鼠标滑向滚动内容时,是否暂停滚动 false
touch 是否支持触摸滑动 true
directionNav 是否显示左右方向箭头按钮 true
keyboard 是否支持键盘方向键操作 true
minItems 一次最少展示滑动内容的单元个数 1
maxItems 一次最多展示滑动内容的单元个数 0
move 一次滑动的单元个数 0
回调函数 start: function(){}, 
before: function(){},
after: function(){}, 
end: function(){}, 
added: function(){}, 
removed: function(){}, 
init: function(){},
$(window).load(function() { $('.flexslider').flexslider({  animation: "fade",              //String: "fade" or "slide"图片变换方式:淡入淡出或者滑动  slideDirection: "horizontal",   //String: "horizontal" or "vertical"图片设置为滑动式时的滑动方向:左右或者上下  slideshow: true,                //Boolean: 载入页面时,是否自动播放  slideshowSpeed: 7000,           //Integer: 自动播放速度毫秒  animationDuration: 600,         //Integer: 动画淡入淡出效果延时  directionNav: true,             //Boolean: (true/false)是否显示左右控制按钮  controlNav: true,               //Boolean: 是否显示控制菜单  keyboardNav: true,              //Boolean: 键盘左右方向键控制图片滑动  mousewheel: false,              //Boolean: 鼠标滚轮控制制图片滑动  prevText: "Previous",           //String: "previous" directionNav item  nextText: "Next",               //String: "next" directionNav item  pausePlay: false,               //Boolean: Create pause/play dynamic element  pauseText: 'Pause',             //String: "pause" pausePlay item  playText: 'Play',               //String: "play" pausePlay item  randomize: false,               //Boolean:是否随即幻灯片  slideToStart: 0,                //Integer: (0 = first slide)初始化第一次显示图片位置  animationLoop: true,            //Boolean: 是否循环滚动  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)   });});

演示:http://www.ijquery.cn/demo/flexslider/index.html

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

FlexSlider js——轮播相关推荐

  1. FlexSlider.js——轮播

    简介 FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果. 压缩后只有4KB大小, FlexSlider对于网站开发者来说是一个不错测JQUERY特效 ...

  2. JavaScript的案例(数据校验,js轮播图,页面定时弹窗)

    1.数据校验             步骤             1.确定事件(onsubmit)并绑定一个函数             2.书写这个函数,获取数据,并绑定id            ...

  3. php 走马灯轮播,Vue.js轮播图走马灯代码实例(全)

    这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...

  4. JS 轮播图 图片切换(定时器)

    标题JS 轮播图 图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...

  5. JS轮播图(网易云轮播图)

    JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...

  6. html5移动端轮播图特效,支持移动端的纯js轮播图插件awesome-slider

    awesome-slider是一款支持移动端的纯js轮播图插件.该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用. 使用方法 安装: /* y ...

  7. JS轮播图(点击切换、自动播放、悬停控制)

    JS轮播图 轮播图可以说是网页上十分常见的效果,很多朋友在学习JavaScript后都迫不及待的想写一些好看对的效果出来,那么轮播图就是一个很不错的练手实例.下面就是通过JS写的轮播图效果: 功能介绍 ...

  8. 三种js轮播实现方式详解(看一遍就会)

    js轮播的三种实现方式 1.替换scr(入门级) <!DOCTYPE html> <html><head><meta charset="utf-8& ...

  9. Bootstrap4框架处理JS轮播

    Bootstrap4框架处理JS轮播 开发工具与关键技术:使用Bootstrap4框架作者:郑健鹏撰写时间:2019年1月16日 我们之前的JS轮播是用原生的JS代码实现,这个方法比较耗费时间,因为还 ...

最新文章

  1. 折半查找递归算法_两篇文章带你了解java基础算法之递归和折半查找
  2. EOSIO.DCT 1.3以上版本工具编写EOS智能合约重大更新
  3. 一条SQL语句在MySQL中是如何执行的
  4. 2017年9月2日普级组T2 跳格子
  5. 数组及字符串相关知识
  6. 飘了!英特尔 2 年内要发布高效芯片超过苹果 M1
  7. 运行HelloJersey遇到异常解决方法
  8. 学习笔记_Java_day12_Cookie
  9. 身份证号码 js验证
  10. 申报指南大全!湖北省各市科技型中小企业申报流程6步走
  11. 巨佬就是巨佬,乔布斯 1973 年求职申请表,拍出22万美元高价!
  12. Android 创建快捷方式图标
  13. 千兆网线 双机互联交叉线
  14. 2022年中国数字科技专题分析
  15. 这5个PHP编程中的不良习惯,一定要改掉!
  16. git不显示贡献度的解决方案
  17. 5.20,福利一波,用文字拼一个自己最爱的人
  18. 16位诺奖天才们关注区块链:7位投身具体项目 14位来自诺贝尔经济学奖
  19. jpeglib使用指南
  20. 快速开发平台:企业信息化建设的不二选择

热门文章

  1. C++虚继承中的虚基类表
  2. 练字(三):三大绝招
  3. 道客巴巴之中考物理考试试题【2】
  4. IT职涯入门首选,计算机网络技术
  5. 信管专业c语言考什么,信管各专业之间的考试数量和放假时长对比
  6. EVP_PKEY_cmp
  7. 路由器mw320虚拟服务器,水星MW320R中继怎么设置_水星MW320R桥接设置-192路由网
  8. C/C++中的字符串比较函数strcmp/memcmp/CString.Compare/CString:CompareNoCase
  9. android自定义进度条样式,Android 自定义进度条
  10. table设置单元格间距