layui(八)——轮播图常见用法总结
carousel 是 layui 2.0 版本中新增的全新模块,主要适用于跑马灯/轮播等交互场景。它可以满足任何类型内容的轮播式切换操作,更可以胜任 FullPage (全屏上下轮播)的需求,简洁而不失强劲,灵活而优雅。
常见的options和方法整理如下:
<div class="layui-carousel" id="test1" lay-filter="carofilter" style="font-size:larger"><div carousel-item><div style="background-color:red">条目1</div><div style="background-color:green">条目2</div><div style="background-color:blue">条目3</div><div style="background-color:mediumorchid">条目4</div><div style="background-color:orange">条目5</div></div></div><!-- 条目中可以是任意内容,如:<img src=""> --><script>layui.use('carousel', function () {var carousel = layui.carousel;//***************************建造实例var ins=carousel.render({elem: '#test1', width: '500px' //设置容器宽度 , arrow: 'always' //始终显示箭头,可选hover,none//,anim: 'updown' //切换动画方式,可选fade,default , full: false //全屏, autoplay: true //自动切换 , interval: 1000 //自动切换的时间间隔 , index: 3 //初始化时item索引,默认时0 , indicator:'inside' //指示器位置,可选outside,none });//**************************监听轮播切换事件 carousel.on('change(carofilter)', function (obj) { //test1来源于对应HTML容器的 lay-filter="test1" 属性值 console.log(obj.index); //当前条目的索引 console.log(obj.prevIndex); //上一个条目的索引 console.log(obj.item); //当前条目的元素对象 });//****************************重置轮播//var ins = carousel.render(options); ins.reload({arrow:'hover'});//将arror从alway变成hover });</script>
注:这是为了个人查找方便整理的文档,并没有总结完全,查看更多可访问官网http://www.layui.com/doc
转载于:https://www.cnblogs.com/wyy1234/p/9455848.html
layui(八)——轮播图常见用法总结相关推荐
- layui框架轮播图实现轮播图片自适应视口缩放
一点JS也不懂,利用layui现成的框架轮播组件,简单的实现了layui框架轮播图自适应视口而缩放效果. 以下是代码: <section><div class="layui ...
- vue中用的swiper轮播图的用法及github的地址
https://github.com/surmon-china/vue-awesome-swiper 以上是github的地址 Vue-Awesome-Swiper Swiper4 component ...
- vue中用的swiper轮播图的用法github的地址
https://github.com/surmon-china/vue-awesome-swiper
- web前端html图片轮播,如何使用LayUI实现网页轮播图_WEB前端开发,layui,轮播图
关于html5中自定义属性的介绍_WEB前端开发 html5为我们提供了以[data-]为前缀定义需要的属性即可设置自定义属性,如[ ].本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参 ...
- layui轮播图切换会有跳动_Layui中轮播图切换函数说明
### Layui中轮播图切换函数说明 ### ##### 官方文档 [链接][Link 1] ##### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdG ...
- layui的轮播图片自适应大小_如何使用LayUI实现网页轮播图
详细内容 本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参考价值,希望对学习Layui的朋友有帮助!想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保 ...
- JS学习之BOM | 常见网页特效 | 轮播图 | 返回顶部 | 筋斗云案例
封校后终于回家咯给即将中考的弟弟加油鼓劲,下午还和涛哥约会但是时间太短了.继续学习吧 许个愿,让我中奖让我中奖让我中奖 常见网页特效案例 案例:网页轮播图(必须掌握) 轮播图装的图片和外面盒子一样大小 ...
- WebAPI第四天学习总结—— 常见网页特效案例(轮播图、节流阀、返回顶部、筋斗云案例)
常见网页特效案例 案例:网页轮播图 轮播图也称为焦点图,是网页中比较常见的网页特效. 效果: 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.点击右侧按钮一次,图片往 ...
- 02-vue(轮播图,v-bind对象用法,v-for指令,v-if指令,v-else-if,v-else指令,key值的基本使用,v-show指令,英雄搜索案例)
01-作业-轮播图 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
最新文章
- 过来人的肺腑之言,攻读ML和CV硕士给我带来了什么?
- [置顶] 浅析objc的消息机制
- jenkins+Docker+springcloud微服务持续集成
- ElasticSearch5.3插件开发(一)控制台打印信息
- JS-封装js让一个div或者img的移动
- linux如何运行qt源码,Linux/Ubuntu下编译Qt4.8.2源码
- 实现线段切割法_切割晶圆及玻璃产品的现代技术与设备
- 程序设计竞赛(ACM)与认证(CCF)的概念集(百度百科)
- Spark DataFrame入门详解
- 如何使用以太网将 Mac 接入互联网?
- 笔记本独显无输出_笔记本屏幕太小?如何拓展视野边界?
- javascript html coffee 编辑器,CoffeeCup HTML Editor (html编辑器)
- xmind安装及导出pdf
- Git更新本地分支信息
- MeGUI中文版2112稳定版发布
- 基于darknet的voc数据集训练和mAP测试
- 一文读大厂微服务水平
- 绿洲App更换logo 在App Store重新上架,苏宁活动又来了!没上车的快来
- 各互联网技术领域pdf图书合集(百度网盘)
- linux格式化只读u盘,linux下FAT32格式u盘只读的问题及解决方法
热门文章
- 瑞萨开发记录04:按键控制数码管(R5F104FEA芯片)
- C++ 字符串转换为数字(三:stoi,stoll,stof,stod)
- html简历中加入css,纯html和css编写的漂亮的个人简历
- midi文件结构分析及生成方法_移动短信技术
- 7.2-循环神经网络
- ubuntu18.04 安装英伟达显卡驱动
- MQTT客户端(基于mosquitto库)上报温度到阿里云
- 女研究生做“思维导图”与男友吵架!堪称吵架届的“内卷之王”....
- python画条形统计图_python基础绘图-统计图
- 采用java8 lambda表达式 实现 java list 交集 并集 差集 去重复并集