码迷,mamicode.com
首页 > Web开发 > 详细

owl-carousel jquery 调取数据循环

时间:2017-11-28 19:46:16      阅读:687      评论:0      收藏:0      [点我收藏+]

标签:data   style   href   demo   arp   src   omd   ons   cti   

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 调取数据循环

标签:data   style   href   demo   arp   src   omd   ons   cti   

原文地址:http://www.cnblogs.com/php0916/p/7911439.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!