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