flexslider+Ajax绑定加载

你是也遇到了，用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 });
    });

 

 

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