Layui中轮播图切换函数说明

朱雀 2020-11-28 05:49 1419阅读 0赞

### Layui中轮播图切换函数说明 ###

##### 官方文档 [链接][Link 1] #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bmFuOTYx_size_16_color_FFFFFF_t_70]  
关于轮播图的使用和讲解，官方文档例子都说的够了。

##### 切换函数说明 #####

除了主动切换函数没有作说明（比如我觉得切换箭头不好看，想换成自己的图片/按钮）  
其实也很简单，如果debug js函数也可以找到

##### 其他 #####

其他的按照官方文档都是比较好理解使用的，另外切换的监听函数和reload方法可以重置ins的各种参数  
比如更改高度

layui.use(['carousel','form'], function(){
            var carousel = layui.carousel;
            var layer = layui.layer;
            var form = layui.form;
            //建造实例
            var ins = carousel.render({
                elem: '#container'
                ,arrow: 'hover' //始终显示箭头
                ,anim: 'default' //切换动画方式
                ,autoplay: false
                ,indicator: 'none'
                ,height: '800px'
            });
            carousel.on('change(test)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
                var options;
                if (obj.index === 0 && obj.prevIndex === 1) {
                    options = {
                        height: '800px'
                    };
                    ins.reload(options);
                } else if (obj.prevIndex === 0) {
                    options = {
                        height: '260px'
                    };
                    ins.reload(options);
                }
    		});
    )}

[Link 1]: https://www.layui.com/doc/modules/carousel.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bmFuOTYx_size_16_color_FFFFFF_t_70]: /images/1606542562176.png