Append加载动态轮播

Posted 2020-08-27

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

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

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

下面是我的js代码

 1 $(function(){
 2     showCarousel();//轮播动态数据
 3 });
 4 /*** 
 5 * ** Date: 2017/01/09
 6 * ** Author: Black_Jay郗
 7 * ** Function: 轮播动态   (需要注意加载顺序)
 8 ***/
 9 function showCarousel(){
10     //var str001 = ‘‘
11     $.ajax({
12         url: ‘’,
13         type: ‘Post‘,
14         dataType: ‘json‘,
15         success: function(data) {
16             for ( var i = 0 ; i < data.length ; i ++ ) {
17                 var url = data[i].Url;
18                 var image = data[i].Image;
19                 lunbo(url,image);
20             }
21             //$.parser.parse(str001);
22             var mySwiper = new Swiper(‘#slide‘,{
23                 pagination: ‘.pagination‘,
24                 slidesPerView: 1,
25                 paginationClickable: true,
26                 preloadImages: false,
27                 lazyLoading: true,
28                 autoplay: 5000,
29                 autoplayDisableOnInteraction: false,
30                 loop: true
31             });
32         }
33     });
34     function lunbo(url,image){
35         $("#showCarousel").append("<div class=‘swiper-slide‘>"
36                 +"<a href=‘"+url+"‘>"
37                 +"<img style = ‘width:100%;height:200px;‘ src=‘"+image+"‘ />"
38                 +"</a>"
39                 +"</div>");
40     }
41 }

想必这样的加载顺序就可以迎刃而解了。

关于页面的加载顺序的分析，以后工作中遇到问题。在与大家一起讨论。。！~