动态请求数据并放入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
随机推荐
- 微信支付errcode:40163，code been used,错误小结
1.配置时注意,支付平台中的支付授权目录, 注意大小写. 昨天碰到的问题,就是自己跳转时,路径写的全小写.跳转支付页面也能跳转过去,但是log中总是调用两次code,报40163错误.后改成和公总号支 ...
- 大前端服务器渲染 发布和部署 Vue + vue（SSR）
https://blog.csdn.net/sinat_15951543/article/details/80109521 就是到服务器dist 下面 npm run start & 然 ...
- Mac 下GitHub 访问慢解决方案
1.GitHub下载是指向了Amazon的服务器 下载地址是http://github-cloud.s3.amazonaws.com/ 解决方案是更改host文件,使该域名指向香港的服务器 2.去 ...
- win10系统下使用markdown2出现的问题
1.转载自:http://blog.csdn.net/chengjierui/article/details/53065599 电脑系统升级Win10后启动不了Markdown Pad2,报错’Awe ...
- 在ubuntu18 安装nginx过程，以及遇到的错误！
1.下载 nginx下载的地址:https://nginx.org/en/download.html 2.解压 指定一个目录下面放置下载的文件,然后解压文件 命令:tar zxvf nginx-1.6 ...
- angular2 图片赋值的时候前面自动加 unsafe:xxx 导致图片信息不显示问题
需要创建一个pipe 代码如下 import { Pipe, PipeTransform } from '@angular/core'; import {DomSanitizer} from '@an ...
- MongoD 语法
MongoD 语法 1.常用 1 .查看有哪些库 > show dbs; admin 0.000GB config 0.000GB local 0.000GB 2 .当前库,只存在于内存中 &g ...
- Deepin 自动挂载win NTFS磁盘
安装了双系统 WIN10+Deepin15.4,系统开机进入Linux,刚开始在/media/my-PC里面还能看到win系统上的C.E.F盘,系统提示更新后,再次打开/media 看不见NTFS分区 ...
- C# BackJson Beautiful format
using System; using System.Collections.Generic; using System.Linq; using System.Web; public class ...
- IIS处理并发请求设置
一个ASP.NET项目在部署到生产环境时,当用户并发量达到200左右时,IIS出现了明显的请求排队现象,发送的请求都进入等待,无法及时响应,系统基本处于不可用状态. 当发现请求明显延迟,没有被即时 ...