分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

owl-carousel jquery 调取数据循环

发布时间:2023-09-06 01:27责任编辑:沈小雨关键词:暂无标签

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

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved