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 = "<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);
});

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!