MUI动态生成轮播图片

        $$.ajax({
            url:'http://localhost:8080/api/v1/food/listFeatureFood',
            type:'Get',
            xhrFields: {withCredentials: true},
               crossDomain: true,
               data:{'foodTakeoutState':0,'foodTop':3},
            success:function(result){
                var length = result.value.length;
                if(length == 1) {
                    console.log(result.value[0].foodImg)
                    $$('.topImg').append(
                        '<div class="mui-slider-item">'+
                            '<a href="#">'+
                                '<img src="'+result.value[0].foodImg+'">'+
                            '</a>'+
                        '</div>'
                        );
                    } else {
                    $$('.topImg').append(
                        //<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                        '<div class="mui-slider-item mui-slider-item-duplicate">'+
                            '<a href="#">'+
                                '<img src="'+result.value[length-1].foodImg+'" >'+
                            '</a>'+
                        '</div>'
                    );
                    $$('.topImgActive').append(
                        '<div class="mui-indicator mui-active"></div>'
                    );
                    for(var i = 0; i < length; i++) {
                            $$(".topImg").append(
                            '<div class="mui-slider-item">'+
                                '<a href="#">'+
                                    '<img src="'+result.value[i].foodImg+'">'+
                                '</a>'+
                            '</div>'
                        );
                    }
                    $$('.topImg').append(
                            //<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                            '<div class="mui-slider-item mui-slider-item-duplicate">'+
                                '<a href="#">'+
                                    '<img src="'+result.value[0].foodImg+'" >'+
                                '</a>'+
                            '</div>'
                        );
                    for(var i = 0; i < length - 1; i++) {
                        $$('.topImgActive').append('<div class="mui-indicator"></div>');
                    }
                }    
                //需要重新加载轮播组件   
                //获得slider插件对象
                var gallery = mui('.mui-slider');
                gallery.slider({
                    interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
                });    
            }
        });

 

转载于:https://www.cnblogs.com/ssjf/p/10213387.html