jq中append添加轮播图片,只能显示一张图片

来源:互联网 发布:centos 7 中文语言包 编辑:程序博客网 时间:2024/05/29 11:17

前天在写项目的时候,想用ajax动态简历dom,使用append添加轮播图片,可是最后只显示了一张图片,然后后台json明明有两条,代码如下

<script type="text/javascript">

//轮播图片的加载函数
$(document).ready(function(){
    var lun=[];
    $.post("../carousel/list.do",function(data){
                 $.each(data, function(index,value){
                     if(index=='rows'){
                         $.each(data[index], function(ind,value){
                              lun[ind]=data[index][ind].ocPicture;
                              //alert(data[index][ind].ocId);   
                         });
                     }
                 });
                
                 for(var i=0;i<lun.length;i++){
                     view(lun[i]);
                 }
                 var swiper = new Swiper('.swiper-container', {
                        nextButton: '.swiper-button-next',
                        prevButton: '.swiper-button-prev',
                        pagination: '.swiper-pagination',
                        slidesPerView: 1,
                        paginationClickable: true,
                        preloadImages: false,
                        lazyLoading: true,
                        autoplay: 5000,
                        autoplayDisableOnInteraction: false,
                        loop: true
                });

               },"json");
        function view(lunbo){
            $('.swiper-wrapper').append('<div class="swiper-slide">'+
                    '<img src='+"${pageContext.request.contextPath}/"+lunbo+' class='+"swiper-lazy"+'/>'+
                '</div>');
          
        }
    
    });
    //结束
</script>

红色的部分本来在一个css文件中,也是使用的read,这样就产生了一个问题,这个方法是ready,引入的js也是read那么先加载哪一个那 ,事实证明先加载的是引入的,因为引入的在这一个上面,解决办法,就如上面的代码

0 0
原创粉丝点击