flexslider+Ajax绑定加载

flexslider+Ajax绑定加载

You，一直在找答案！

You，一直在找答案！

You，一直在找答案！

You，一直在找答案！

哈哈哈。。。。，你是也遇到了，用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 = "

"; $("#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 += "

" + dt[i].Atitle + "

"; } $("#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 }); });

赶紧跑一遍，看效果！看效果！看效果！看效果！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。