FlexSlider.js——轮播
简介
FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果。 压缩后只有4KB大小, FlexSlider对于网站开发者来说是一个不错测JQUERY特效,因为支持全浏览器深受中国网站前端开发者的喜爱! 它将UL列表转换成内容滚动的列表,可以自动播放,或者使用导航按钮和键盘来控制。
使用方法
1、引入文件
2、HTML
<div class="flexslider" style="width:500px;margin-left:110px;">
<ul class="slides">
<li><img src="data:images/s1.jpg"/></li>
<li><img src="data:images/s2.jpg"/></li>
<li><img src="data:images/s3.jpg"/></li>
<li><img src="data:images/s4.jpg"/></li>
</ul>
</div>
3、JavaScript
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript"src="js/jquery.flexslider-min.js"></script>
<script type="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 itemnextText: "Next", //String: "next" directionNav itempausePlay: false, //Boolean: Create pause/play dynamic elementpauseText: 'Pause', //String: "pause" pausePlay itemplayText: 'Play', //String: "play" pausePlay itemrandomize: 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 hoveringcontrolsContainer: "", //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,可以设定hoverstart: function(){}, //Callback: function(slider) - Fires when the slider loads the first slidebefore: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animationafter: function(){}, //Callback: function(slider) - Fires after each slider animation completesend: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)}); });
FlexSlider.js——轮播相关推荐
- FlexSlider js——轮播
简介 FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.压缩后只有4KB大小,FlexSlider对于网站开发者来说是一个不错测JQUERY特效,因 ...
- JavaScript的案例(数据校验,js轮播图,页面定时弹窗)
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id ...
- php 走马灯轮播,Vue.js轮播图走马灯代码实例(全)
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
- JS 轮播图 图片切换(定时器)
标题JS 轮播图 图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...
- JS轮播图(网易云轮播图)
JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...
- html5移动端轮播图特效,支持移动端的纯js轮播图插件awesome-slider
awesome-slider是一款支持移动端的纯js轮播图插件.该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用. 使用方法 安装: /* y ...
- JS轮播图(点击切换、自动播放、悬停控制)
JS轮播图 轮播图可以说是网页上十分常见的效果,很多朋友在学习JavaScript后都迫不及待的想写一些好看对的效果出来,那么轮播图就是一个很不错的练手实例.下面就是通过JS写的轮播图效果: 功能介绍 ...
- 三种js轮播实现方式详解(看一遍就会)
js轮播的三种实现方式 1.替换scr(入门级) <!DOCTYPE html> <html><head><meta charset="utf-8& ...
- Bootstrap4框架处理JS轮播
Bootstrap4框架处理JS轮播 开发工具与关键技术:使用Bootstrap4框架作者:郑健鹏撰写时间:2019年1月16日 我们之前的JS轮播是用原生的JS代码实现,这个方法比较耗费时间,因为还 ...
最新文章
- [CareerCup] 8.5 Online Book Reader System 在线读书系统
- BZOJ 1101: [POI2007]Zap
- ubuntu使用KVM创建虚拟机
- 虚拟局域网Vlan与单臂路由、三层交换、链路聚合技术
- 使用application log分析Fiori navigation target解析错误
- python怎么读写_python怎么读写文件
- python正弦波和等腰三角波_51proteus仿真:生成方波、正弦波、锯齿波和三角波
- 重构手法之重新组织数据【1】
- Python 柱状图 横坐标 名字_Python爬虫实例(二)——爬取新馆疫情每日新增人数
- 工程图字体宋体仿宋_电纸书kindle字体推荐——耐看、悦目、经典
- ztree树默认根据ID默认选中该条数据
- Linux安装wordpress
- DDoS攻击:无限战争
- GEE:批量下载数据,按月合成,不同景,全实验区域,一键执行
- PS知识点大总结(二)——通道蒙版与图形图标设计
- gorm记一次joins查询不出数据
- FILETIME to DateTime
- JetBrains-License-Server
- 电离辐射防护与辐射源安全基本标准_新版安全帽标准GB28112019头部防护 安全帽...
- IBM Bluemix 中文公众版初体验
热门文章
- MacX DVD Ripper Pro for Mac(DVD解码器) 6.2.120190416免激活版
- php cs fixer.bat,使用 PHP-CS-Fixer 自动规范化你的 PHP 代码
- php session 修改,php session 如何修改,
- Python Enclosing作用域、闭包、装饰器话聊(转)
- 低功耗技术(二)常见的低功耗技术
- 千里走单骑:09-北京到上海骑记--Day8.艰难连云港
- window 命令行bat脚本软连接执行exe
- 网卡工作在OSI的第几层?[转]
- 手机APP试玩赚钱平台真实性及其技术论证
- 如何设计自适应屏幕大小的网页