zoukankan      html  css  js  c++  java
  • 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="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

  • 相关阅读:
    Java基础——消息队列
    Java基础——缓存
    Java基础——动态代理
    Java基础——克隆
    Java基础——锁
    Java基础——线程池
    Java基础——线程
    Java基础——HashMap
    Java基础——String
    SpringMVC的学习____5.乱码问题的解决_两种方法(两个类)
  • 原文地址:https://www.cnblogs.com/php0916/p/7911439.html
Copyright © 2011-2022 走看看