你是也遇到了,用Ajax加载时,只能加载一张图片的问题?百度不到答案!
那么恭喜你,答案来了:推荐使用方法二,方法一存在一些问题
首先,分析无法加载的原因:
因为Ajax和$('.flexslider').flexslider({ });同时进行了,所以Ajax还没添加完图片,$('.flexslider').flexslider({ });就完事了。
所以我们只需要让Ajax先执行,$('.flexslider').flexslider({ });延迟执行。
代码如下:
Ajax添加图片方法
function SelSlideMainData(IndustryID, CompanyID, ProTypeID, SlideID) {
$.ajax({
url: '/Home/AjaxService/SelSlideMainData.ashx',
type: 'GET',
data: { companyid: CompanyID, industryid: IndustryID, protypeid: ProTypeID, slideid: SlideID },
success: function (data) {
var dt = eval("(" + data + ")");
var item = "";
for (var i = 0; i < dt.length; i++) {
item = "<li><a href=\"" + dt[i].Ahref + "\" target=\"" + dt[i].Atarget + "\" title=\"" + dt[i].Atitle + "\"><img src=\"" + dt[i].ImgSRC + "\" /></a></li>";
$("#slide-main").append(item);
}
}
});
}
重点来了:
方法一:
$(function () {
//========首页导航广告========
SelSlideMainData(1, -100, -1, 1);
//用setInterval,即可给Ajax留有执行的时间,再进行flexslider的初始化
setInterval(function () {
//=========首页头部滚动广告=========
$('.flexslider_top').flexslider({
slideshowSpeed: 3000, //展示时间间隔ms
animationSpeed: 1000, //滚动时间ms
touch: true, //是否支持触屏滑动
directionNav: true,
pauseOnAction: true,
animation: "slide",
start: function (slider) { }
});
}, 0);
});
方法二:
$.ajax({
url: '/Leather/Home/AjaxService/SelSlideMainData.ashx',
type: 'GET',
cache: true,
async: true,
data: { companyid: CompanyID, industryid: IndustryID, siteid: SiteID, levelid: LevelID },
success: function (data) {
var dt = eval("(" + data + ")");
var item = "";
for (var i = 0; i < dt.length; i++) {
item += "<li style=\"background: #f6f6f6 url(" + dt[i].ImgSRC + ") no-repeat scroll 50% 50%; position: absolute; width: 1423px; left: 0px; top: 0px; display: list-item; opacity: 0.959733;\"><a href=\"" + dt[i].Ahref + "\" target=\"" + dt[i].Atarget + "\" title=\"" + dt[i].Atitle + "\" rel=\"bookmark\">" + dt[i].Atitle + "</a></li>";
}
$("#slide-main").html(item);
}
});
//ajax加载完成后执行
$("#slide-main").ajaxComplete(function () {
//=========商家店铺首页导航广告=========
//幻灯片滚动
jQuery(".baner").slide({ titCell: ".dot", mainCell: ".cover .imgUl", effect: "fold", autoPage: true, autoPlay: true, trigger: "click", interTime: 3000, delayTime: 1500 });
});
赶紧跑一遍,看效果!看效果!看效果!看效果!
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!