动态请求数据并放入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
随机推荐
- Asp.net Mvc 与WebForm 混合开发
根据项目实际需求,有时候会想在项目中实现Asp.net Mvc与Webform 混合开发,比如前台框架用MVC,后台框架用WebForm.其实要是实现也很简单,如下: (1)在MVC 中使用Web ...
- 如何用java实现一个p2p种子搜索(3)-dht协议实现
dht协议实现 上一篇完成了路由表的实现,建立了路由表后,我们还要对路由表进行初始化,因为一开始路由表为空,所以我们需要借助一些知名的dht网络中的节点,对这些节点进行find_node,然后一步步初 ...
- php 日历代码
日历的PHP接口代码: $user_id = $_SESSION['user_id']; $year = isset($_REQUEST['tty']) ? intval($_REQUEST['tty ...
- 初探 Liunx 的命令模式（一）
1.从 X window 切换到 纯命令模式 Ctrl+Alt+[F2-F6].切换回来 Ctrl+Alt+[F2-F6]. 2. 1)CentOS Linux 7 (Core)代表 Linux d ...
- Blend 打开psd文件
1.创建完项目后->文件->导入ps文件->选择psd文件
- 关于8.0.15版本的mysql下载与安装
下载MYSQL 官网下载MYSQL8.0.15版本,链接地址https://www.mysql.com/downloads/,流程如下 点击进入后,网页滑到最下面,根据自己电脑的型号下载相应的版本 安 ...
- JMeter关联的几种方式总结案例
1.接口响应结果,通常为HTML.JSON格式的数据,对于HTML的响应结果的提取,可以通过正则表达式,也可以通过XPath 来提取. 2.对于JSON格式的数据,可以通过正则表达式.JSON Ext ...
- CentOS6.x 下 /etc/security/limits.conf 被改错的故障经历
Intro 我司本小厂,每个员工都是身兼数职,所以开发人员直接登录线上服务器改东西是常态.有些开发人员,自持水平较高(的确水平也是较高,但缺乏对系统的敬畏),所以总是越俎代庖,改一些本身应该是线上运维 ...
- input autocomplete属性设计输入框自动联想（php实现）
因为客户临时要求加一个输入框自动联想,就开始了解这块.结合网上总结最难的一点就是找好对应的js版本以及相应的jQuery-ui: 以下是我用的版本,以及连接地址: jQuery的js文件: <s ...
- json格式new Date()的一个小坑
见图:JSON.stringify( new Date(Date.parse('xxxx-xx-xx'))) 若是传的日期,在10号前,要进行转换.