owl-carousel jquery 调取数据循环

Posted qingqing.li

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了owl-carousel jquery 调取数据循环相关的知识,希望对你有一定的参考价值。

jquery部分

<script type="text/javascript">


$(document).ready(function() {
 
  $("#owl-demolpo").owlCarousel({
        items: 4,
        navigation: true,
        navigationText: ["",""],
        dataType : \'jsonp\',
	jsonp: \'jsonpCallback\',
        jsonPath : \'你的json数据页面/aaa.php\',
        jsonSuccess : customDataSuccess
  });

});
</script>
<script type="text/javascript">
 
  function customDataSuccess(huodong){
                         var SchoolDetail = \'\';
			 for (var j = 0; j < huodong.length; j++) {
                             var imgurl=huodong[j].photoUrl;  
                            SchoolDetail += \'<div class="yijj item"> \'
                            +\'  <p class="p1"><img style="width:195px;height:150px;"  src=\'+imgurl +\'> </p>\'
                                +\'  <p class="p2"><a href="\'+huodong[j].activityUrl+\'">\'+huodong[j].activityName+\'  </a></p>\'
                             +\'  </div>\';
          
                          }
          $("#owl-demolpo").html(SchoolDetail);
  }

</script> 

  json数据页面

[{"activityName":"期中试卷免费诊断","activityUrl":"http://wenzhangurl.cn/huodong/123","photoUrl":"http://images.cn/upload/2017/10/25/20171025171830-8852e6be.png"}
,{"activityName":"高考志愿填报讲座","activityUrl":"http://wenzhangurl.cn/96","photoUrl":"http://images.cn/upload/2017/10/26/20171026101927-8be273c1.png"}]

html部分

 <div  id="owl-demolpo" class="owl-carousel rementuijian">
  
            
        </div>

完成效果

 

参考页面:http://demo.lanrenzhijia.com/2013/pic1201/demos/customJson.html

以上是关于owl-carousel jquery 调取数据循环的主要内容,如果未能解决你的问题,请参考以下文章

有没有办法改变owl-carousel的光标? (不是 owl-dots 或 owl-nav)

通过 Ajax 调取后台接口将返回的 json 数据绑定在页面上

父页面从子页面调取数据并展示1

jQuery$.each循环遍历详解,各种取值对比,$.each遍历数组对象Dom元素二维数组双层循坏类json数据等等

调整owl-carousel的高度

owl-carousel 无法阻止默认