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;
                });    
            }
        });

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM