mui动态生成轮播图
发布时间:2020-12-16 03:02:09 所属栏目:百科 来源:网络整理
导读:div class = " lunbo " !--img class = " lunbo-img " src= " img/shouye1.png " /-- div class = " mui-slider " div class = " mui-slider-group mui-slider-loop " /div div class = " mui-slider-indicator " /div /div/div function hotList() { $.ajax
<div class="lunbo"> <!--<img class="lunbo-img" src="img/shouye1.png" />--> <div class="mui-slider"> <div class="mui-slider-group mui-slider-loop"> </div> <div class="mui-slider-indicator"> </div> </div> </div> function hotList() { $.ajax({ type: "post",url: IP + "/mobile/ad/hotList.html",dataType: "json",success: function(data) { console.log(JSON.stringify(data)); $(‘.mui-slider-group‘).empty(); $(‘.mui-slider-indicator‘).empty(); var length = data.data.list.length; if(length == 1) { console.log(data.data.list[0].src) $(‘.mui-slider-group‘).append(‘<div class="mui-slider-item"><img class="lunbo-img" src="‘ + data.data.list[0].src + ‘" /></div>‘); } else { $(‘.mui-slider-group‘).append(‘<div class="mui-slider-item mui-slider-item-duplicate"><img class="lunbo-img" src="‘ + data.data.list[length - 1].src + ‘" /></div>‘); $(‘.mui-slider-indicator‘).append(‘<div class="mui-indicator mui-active"></div>‘); for(var i = 0; i < length; i++) { $(‘.mui-slider-group‘).append(‘<div class="mui-slider-item"><img class="lunbo-img" src="‘ + data.data.list[i].src + ‘" /></div>‘); } $(‘.mui-slider-group‘).append(‘<div class="mui-slider-item mui-slider-item-duplicate"><img class="lunbo-img" src="‘ + data.data.list[0].src + ‘" /></div>‘); for(var i = 0; i < length - 1; i++) { $(‘.mui-slider-indicator‘).append(‘<div class="mui-indicator"></div>‘); } } var gallery = mui(‘.mui-slider‘); gallery.slider({ interval: 5000 //自动轮播周期,若为0则不自动播放,默认为0; }); } }); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |