获取动态数据渲染轮播图（banner）

以bootstrap轮播图为例；

html部分：

            <div id="carousel-example-generic" class="carousel slide banner-wrap" data-ride="carousel">
                <ol class="carousel-indicators banner-indicators">
                  
                </ol>
                <div class="carousel-inner banner-carousel" role="listbox">
                
                </div>
            </div>

JS部分：这里放的是关键性代码，这里判断后台数据的bannerData参数有没有图片

               如果没有图片则隐藏该轮播图，否则渲染出来；

            if(bannerData.length==0){
                $(".banner-wrap").addClass("hide");
            }else{
//                轮播图个数（也就是底下的小圆点）
                for(var i=0;i<bannerData.length; i++){
                    if(i == 0){      //因为第一张需要加上active
                        $(".banner-indicators").append("<li data-target='#carousel-example-generic' data-slide-to='0'  class='active'</li>")
                    }else{
                        $(".banner-indicators").append("<li data-target='#carousel-example-generic' data-slide-to='"+i+"'></li>")
                    }
                }
//                轮播图张数
                for(var i=0; i<bannerData.length;i++){
                      if(i == 0) {         //因为第一张需要加上active
                        $(".banner-carousel").append('<div class="item active">'+
                        '<img src="'+bannerData[i].source+'" alt="广告图">'+
                          '</div>'
                          );
                    } else {
                        $(".banner-carousel").append('<div class="item">'+
                        '<img src="'+bannerData[i].source+'" alt="广告图">'+
                          '</div>'
                          );
                   }

                }
            }

OK了，喜欢的小伙伴可以点点关注哟·欢迎留言