动态请求数据并放入bootstrap轮播图
下面是前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators" id="olnum">
<!--填充到这里-->
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" id="lunbotu">
<!--填充到这里-->
</div> <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <script type="text/javascript">
$(function() {
var baseurl = 'http://127.0.0.1:8089/';
var args = {
"time": new Date()
};
var id = 7;
var url = baseurl + 'project/get/' + id;
$.get(url, args, function(data) {
var extend = data.extend;
var project = extend.project;
var proimgsurl = extend.proimgsurl;
//首先清空已有数据
$("#lunbotu").empty();
$("#olnum").empty();
//填充轮播图数
for(var i=0;i<proimgsurl.length; i++){
if(i == 0){
$("#olnum").append("<li data-target='#carousel-example-generic' data-slide-to='0' class='active'></li>")
}else{
$("#olnum").append("<li data-target='#carousel-example-generic' data-slide-to='"+i+"'></li>")
}
}
//填充每幅图像的具体信息
for(var i = 0; i < proimgsurl.length; i++) {
if(i == 0) {
$("#lunbotu").append("<div class='item active'>" +
"<img src='" + proimgsurl[i] + "' alt=''>" +
"<div class='carousel-caption'>" +
"<p> " + "第" + i + "</p>" +
"</div>" +
"</div>");
} else {
$("#lunbotu").append("<div class='item'>" +
"<img src='" + proimgsurl[i] + "' alt=''>" +
"<div class='carousel-caption'>" +
"<p> " + "第" + i + "</p>" +
"</div>" +
"</div>");
}
}
})
});
</script>
</body>
</html>
上面请求的接口返回的json数据大致如下：
{
"code": 200,
"msg": "处理成功",
"extend": {
"project": {
"id": 1,
"proTitle": "三林路老房翻新工程",
"proAddress": "三林路",
"proDate": 1517803509000,
"proDistribute": "这是个老房翻新的工程，工程量不大，但也不好做，尽我所能让客户满意。",
"category": "室内装潢",
"firstimg": "C:/Users/hasee/AppData/Local/Temp/tomcat-docbase.7305268964789322776.8089/static/ProjectImgs/2018/5/19/2ea44b08dbcc462886af1c8e100bb429.png"
},
"proimgsurl": [
"C:/Users/hasee/AppData/Local/Temp/tomcat-docbase.7305268964789322776.8089/static/ProjectImgs/2018/5/19/2ea44b08dbcc462886af1c8e100bb429.png",
"C:/Users/hasee/AppData/Local/Temp/tomcat-docbase.2926016469805383954.8089/static/ProjectImgs/2018/5/20/6a3dfb5c83af4dc594f989e4a9baac9e.png",
"C:/Users/hasee/AppData/Local/Temp/tomcat-docbase.7305268964789322776.8089/static/ProjectImgs/2018/5/19/2ea44b08dbcc462886af1c8e100bb429.png",
"C:/Users/hasee/AppData/Local/Temp/tomcat-docbase.7305268964789322776.8089/static/ProjectImgs/2018/5/19/2ea44b08dbcc462886af1c8e100bb429.png"
]
}
}
由于只是使用轮播图，故只是使用了图片数据
动态请求数据并放入bootstrap轮播图的更多相关文章
- bootstrap轮播图 两侧半透明阴影
用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...
- Bootstrap 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- 解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。
问题描述: 1.我使用axios异步请求后台的图片进行渲染后不能实现循环轮播,也就是loop失效,但是静态写死的情况下不会出现这种问题. 2. 分析: swiper的机制是:初始化的时候将swiper ...
- 第124天：移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- bootstrap轮播图--兼容IE7
<!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...
- bootstrap轮播图组件
一.轮播图组件模板(官方文档) <div id="carousel-example-generic" class="carousel slide" dat ...
- bootstrap轮播图
<!doctype html><html><head> <meta charset="utf-8"> <title>使用 ...
- Bootstrap 轮播图（Carousel）插件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap轮播图不能显示左右箭头
引入font文件夹即可 原文 :http://www.imooc.com/qadetail/64277
随机推荐
- zynq DMA控制器
Zynq-7000系列器件PS端的DMA控制器采用ARM的IP核DMA-330(PL-330)实现. 特点: 1.8个独立的通道,4个可用于PL—PS间数据管理,每个通道有1024Byte的MFIFO ...
- neo4j-cypher
cypher查询务必在需要查询的节点上加上标签,否则数据量一大查询就会非常慢(在查询时必须设置实体标签,否则不走索引),另外Neo4j索引做好了查询的优化基本上就完成了80%.需要注意index是建立 ...
- STM32F0使用LL库实现Modbus通讯
在本次项目中,限于空间要求我们选用了STM32F030F4作为控制芯片.这款MCU不但封装紧凑,而且自带的Flash空间也非常有限,所以我们选择了LL库实现.本篇将说明基于LL实现USART通讯. 1 ...
- matplotlib 中的柱状图
def drawBar(): pyplot.bar(range(5),[100,200,300,400,400]) pyplot.xticks(range(5),['A','B','C','D','E ...
- JS监听浏览器的返回、后退、上一页按钮的事件方法
在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包等 ...
- 设置SecureCRT的背景色和文字颜色方案
一.对于临时设置,可以如下操作: 首先options -- session - appearance 此处可以设置临时的窗口背景,字体颜色,大小等等,为什么说是临时,是因为只要你关闭连接后,又会恢复. ...
- linux安装postgresql简洁版
环境: linux 7.+ postgresql 10.5 1.下载10.5版本的源码,make后成可执行版本 2.创建数据库 initdb -D /xxx/yyy(对应为数据目录,提前创建好 ...
- 《ServerSuperIO Designer IDE使用教程》-2.与硬件网关数据交互，并进行数据级联转发，直到云端。发布：v4.2.1版本
v4.2.1 更新内容:1.重新定义数据转发文本协议,使网关与ServerSuperIO以及之间能够相关交互数据.2.扩展ServerSuperIO动态数据类的方法,更灵活.3.修复Designer增 ...
- 如何把遗留的Java应用托管在Service Fabric中
一.概述 众所周知,微服务化尤其对遗留系统进行微服务化一般采用"Lift and Shift"的模式进行. Service Fabric作为一个微服务托管平台,不仅仅可以在上面跑. ...
- unity runtime时导入fbx文件
TriLib is a Unity model loader package designed to allow the user to load various 3D model formats i ...