动态请求数据并放入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 ...
- 推荐前端开发手机调试打印神器console.log()
下面说的这个插件很牛,相信很多人都不知道,但找问题的时候很需要,直接上干货如下: vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板. 下载 vConsole 的最新版本.(不要直接 ...
- thymleaf th:if判断某值不为空
简单描述:判断后台传递过来的值,是否为空,来做一些业务上的处理. 代码: <div class="col-md-6" th:if="${not #strings.i ...
- Selenium 常用API
浏览器相关操作 启动浏览器 driver = new ChromeDriver(); 控制浏览器窗口大小 maximize() 设置浏览器最大化 setSize() 设置浏览器窗口的宽与高 访问网页 ...
- Xpath Helper的使用
xPath Helper插件 xPath helper是一款Chrome浏览器的开发者插件,安装了xPath helper后就能轻松获取HTML元素的xPath,程序员就再也不需要通过搜索html源代 ...
- C#如何拦截 Webbrowser Control的响应内容
场景目标 假如Webbrowser中的一个页面打开后第一件事就是执行了alert,我们想要阻止它该如何做? <html> <head> <script src=" ...
- stylus 样式
- 解决使用redis作为session缓存 报错 Error: no such key 的问题
spring的issue https://github.com/spring-projects/spring-session/issues/954 原答案是 Updated my codes to 2 ...
- CMD运行命令每次都要进入很麻烦
20:35:52 win+r 输入regedit 进入注册表 找到HKEY_LOCAL_MACHINE\Software\Microsoft\Command Processor项 创建AutoRun ...
- python基础知识练习题（二）
1. 有两个列表 l1 = [11, 22, 33] l2 = [22, 33, 44] a.获取内容相同的元素列表 li = []l1 = [11, 22, 33] l2 = [22, 33, 44 ...