首页 > 代码库 > Append加载动态轮播
Append加载动态轮播
前几天遇到了些小麻烦,不过很快就解决了。之所以要记下来是因为作为一名前端的程序员,要理解页面的加载顺序是最重要的。要不然自己写程序意外的出现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=http://www.mamicode.com/‘"+url+"‘>" 37 +"<img style = ‘width:100%;height:200px;‘ src=http://www.mamicode.com/‘"+image+"‘ />" 38 +"</a>" 39 +"</div>"); 40 } 41 }
想必这样的加载顺序就可以迎刃而解了。
关于页面的加载顺序的分析,以后工作中遇到问题。在与大家一起讨论。。!~
Append加载动态轮播
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。