Append加载动态轮播

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前几天遇到了些小麻烦，不过很快就解决了。之所以要记下来是因为作为一名前端的程序员，要理解页面的加载顺序是最重要的。要不然自己写程序意外的出现bug~~

刚开始写利用Append的时候，利用火狐的firebug查看元素class里面swiper-slide还在，可是轮播的时候没有动态的效果。数据库里有轮播的五条数据。。。。。

首先加载顺序一定要理解：

下面是我的js代码

 $(function(){

     showCarousel();//轮播动态数据

 });

 /***

 * ** Date: 2017/01/09

 * ** Author: Black_Jay郗

 * ** Function: 轮播动态   (需要注意加载顺序)

 ***/

 function showCarousel(){

     //var str001 = ''

     $.ajax({

         url: ‘’,

         type: 'Post',

         dataType: 'json',

         success: function(data) {

             for ( var i = 0 ; i < data.length ; i ++ ) {

                 var url = data[i].Url;

                 var image = data[i].Image;

                 lunbo(url,image);

             }

             //$.parser.parse(str001);

             var mySwiper = new Swiper('#slide',{

                 pagination: '.pagination',

                 slidesPerView: 1,

                 paginationClickable: true,

                 preloadImages: false,

                 lazyLoading: true,

                 autoplay: 5000,

                 autoplayDisableOnInteraction: false,

                 loop: true

             });

         }

     });

     function lunbo(url,image){

         $("#showCarousel").append("<div class='swiper-slide'>"

                 +"<a href='"+url+"'>"

                 +"<img style = 'width:100%;height:200px;' src='"+image+"' />"

                 +"</a>"

                 +"</div>");

     }

 }