slider动态加载

html

    <div id="slider" class="mui-slider" style="height:220px;">  
                <div class="mui-slider-group mui-slider-loop" id="gallery">  

                </div>  
                <div class="mui-slider-indicator" id="indicator">  
                </div>  
            </div>

js

    function Home_slider() {  
        var first='';  
        var last='';  
        var middle='';  
        var gallerys=document.getElementById("gallery");  
        var elements=document.getElementById("indicator");  
        var slider = mui("#slider");  
        mui.ajax('http://127.0.0.1/app/home/index.php?r=ad/get-home-ad',{  
            dataType:'json',//服务器返回json格式数据  
            type:'get',//HTTP请求类型  
            timeout:10000,//超时时间设置为10秒；  
            success:function(data){  
                console.log(JSON.stringify(data));  
                var ret=data.response;  
                var result=data.result;  
                var website='http://127.0.0.1/app/home/';  
                if (ret==200) {  
                  while(gallerys.hasChildNodes())   
                          {  
                          gallerys.removeChild(gallerys.firstChild);  
                          }  
                          var i=0;  
                          mui.each(result,function(index,item){   
                                i++;  
                                var para=document.createElement("div");  
                                if (i==1) {  
                                 para.className='mui-indicator mui-active';   
                                 elements.appendChild(para);  
                                 first='<div class="mui-slider-item mui-slider-item-duplicate">'  
                                 +'<a href="javascript:;">'  
                                 +'<img src="'+website+item.content+'">'  
                                 +'</a>'  
                                 +'</div>';  
                                }else{  
                                 para.className='mui-indicator';  
                                 elements.appendChild(para);  
                                 if (i==4) {  
                                 last='<div class="mui-slider-item mui-slider-item-duplicate">'  
                                 +'<a href="javascript:;">'  
                                 +'<img src="'+website+item.content+'">'  
                                 +'</a>'  
                                 +'</div>';  
                                 }  
                                  middle='<div class="mui-slider-item">'  
                                 +'<a href="javascript:;">'  
                                 +'<img src="'+website+item.content+'">'  
                                 +'</a>'  
                                 +'</div>';  
                                }  
                                 gallerys.innerHTML+=first;  
                                 gallerys.innerHTML+=middle;  
                                 gallerys.innerHTML+=last;  
                                });  
                                slider.slider({  
                                    interval: 5000  
                                });  
                            }else{  
                            slider.slider({  
                            interval: 0  
                            });   
                            }  
                            },  
                            error:function(xhr,type,errorThrown){  

                            }  
                           });  
                            }