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