-
-
yangqh 数据老手Lv5
发表于2019-6-29 16:44
楼主
大屏展示通常会追求酷炫的动态效果，今天分享一个简单又实用的组件轮播展示的小脚本。
炒菜之前先要准备好食材~这里以四个富文本为例，先将四个富文本组件稍加修饰、入锅~
如下图
然后加点佐料~
添加加载完成事件脚本
复制代码预览、确认效果，出锅~搞定
这种轮播的脚本，其他的组件，比如统计图、数字牌什么的，都同样适用。是不是炒鸡简单？动手试试吧~
炒菜之前先要准备好食材~这里以四个富文本为例，先将四个富文本组件稍加修饰、入锅~
如下图
然后加点佐料~
添加加载完成事件脚本
- var ids = ['HHH1', 'HHH2', 'HHH3', 'HHH4'];//需轮播显示的组件代号
- var index = 0;
- function autolay() {
- for (var i = 0; i < 4; i++) {
- var basedom = g_coolpage.getWidgetById(ids[i]).basedom;
- if (i == index) {
- //显示
- basedom.style.display = '';
- } else {
- //隐藏
- basedom.style.display = 'none';
- }
- }
- index++;
- index = index % 4;
- setTimeout(autolay, 2000);//2秒显示一个
- }
- autolay();
这种轮播的脚本，其他的组件，比如统计图、数字牌什么的，都同样适用。是不是炒鸡简单？动手试试吧~
