动态请求数据并放入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
随机推荐
- sed 修改文本
修改文本是指将所匹配的文本行利用新文本替代,sed编辑命令的修改文本符号为 c\, [ sed]$ more input [ sed]$ more aa.sed #!/bin/sed -f //c\ ...
- python学习第32天
# 使用模块操作进程# multiprocessing 一个多元化的进程模块# multiple 多元化 processing 进程 # 涵盖了和进程相关的几乎所有的内容# Process类 帮助你启 ...
- php 日历代码
日历的PHP接口代码: $user_id = $_SESSION['user_id']; $year = isset($_REQUEST['tty']) ? intval($_REQUEST['tty ...
- html获取输入框的值
https://zhinan.sogou.com/guide/detail/?id=316512383339
- react安装 项目构建
1.nodejs安装 下载安装包,解压.如果是已编译文件,在/etc/profile中设置PATH(/etc/profile文件中的变量设置,所有用户可用,但需求重启服务器),并source /etc ...
- Linq中类型转换
var BusDebts = db1.BusDebts.Where(s => s.BusOpt >= dts && s.BusOpt < dte && ...
- [转] vue异步处理错误
Vue.prototype.$await = async function(action) { try { await action(); } catch (err) { // 这里是你处理错误的逻辑 ...
- MyBatis异常：元素内容必须由格式正确的字符数据或标记组成
今天在写接口查询SQL时,报了一个异常,如下: Cause: org.apache.ibatis.builder.BuilderException: Error creating document i ...
- 重新拾取：TFS2017钉钉机器人源代码签入通知
http://www.cnblogs.com/79039535/p/9316791.html 现在很多公司办公都使用钉钉打卡签到,于是鉴于公司也使用钉钉就打算用钉钉来做一个源代码签入通知. 首先先去打 ...
- 三、自动化测试平台搭建-django-如何用mysql数据库做web项目
从这节开始到后面说的大概内容如下: 这里说的是Django做一个web项目的大概框架,从下篇具体说Django中的模型(查询..),视图(请求,响应,cookie,session..),模板(验证码, ...