mui 轮播图渲染

最新推荐文章于 2024-03-01 10:09:26 发布

whxweb

最新推荐文章于 2024-03-01 10:09:26 发布

阅读量245

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/whxweb/article/details/111613484

版权

/* 获取轮播图数据 */
function getSwiper(){
	var url = comUrl + "/swipper/list"
		$.ajax({
			type: "get",
			url: url,
			success: function(res) {
				console.log(res);
				var data = res.data
				var sliderHtml = '';
				var len = data.length;
				sliderHtml += '<div class="mui-slider-item mui-slider-item-duplicate"><a href="' + data[len - 1].pagesCode.url + '"><img src="' + data[len - 1].url + '" /></a></div>';
				for(var i = 0; i < len; i++) {
					sliderHtml += '<div class="mui-slider-item"><a href="' + data[i].pagesCode.pageUrl + '"><img src="' + data[i].url + '"/></a></div>';
				
				}
				sliderHtml += '<div class="mui-slider-item mui-slider-item-duplicate"><a href="' + data[0].pagesCode.pageUrl + '"><img src="' + data[0].url + '" /></a></div>';
				$(".mui-slider-group").html(sliderHtml);
				var indicator = '<div class="mui-indicator mui-active"></div>';
				for(var i = 0; i < len; i++) {
					indicator += '<div class="mui-indicator"></div>';
				}
				$(".mui-slider-indicator").html(indicator);
				var gallery = mui('.mui-slider');
				gallery.slider({
					 interval:1200//自动轮播周期，若为0则不自动播放，默认为0；
				});
			}
		});
}