$.ajax({
type : "get",
url : "data.php",
data : {type:1 },
dataType:"json",
beforeSend: function(){
$('.swiper-wrapper').html('');
},
error:function(){
//alert("操作出错");
},
success:function(res){
var html = "";
$.each(res['result'], function(i, item) {
html += '<div class="swiper-slide"><a href="####"><img src="'+item.pic+'"></a></div>';
});
$('.swiper-wrapper').html(html);
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
onSlideChangeStart:function(sw){
var num = parseInt(sw.activeIndex);
console.log('---'+ num);
}
});
}
});新增两句:
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
本文介绍如何通过Ajax从服务器获取图片数据,并利用这些数据动态生成Swiper轮播图组件。文中详细展示了JavaScript代码实现过程,包括数据请求、DOM操作及Swiper初始化等关键步骤。
1541

被折叠的 条评论
为什么被折叠?



